htmlcsssvgsvg-animateborder-image

Why doesn't all of my animated GIF border animate?

I have this GIF, that I want to use for a border:

Image link

But when I apply the following class to a paragraph, only the corners animate. How do I fix this so that the entire border scrolls?

.border {
  border: 25px solid transparent;
  padding: 15px;
  border-image-source: url(https://hosting.pysnek.repl.co/assets/archive/animBorder.gif);
  border-image-repeat: round;
  border-image-slice: 30;
}
<p class="border">A paragraph.</p>

Solution

  • Instead of using GIF animation, I suggest you to use SVG animation. Take a look at Code snippet.

    At this example, you can see SVG image, where animations defined for each region, take a look at this article for more details.

    In inline SVG you can also find comments.

    Base64 SVG data using only like an example, you can create SVG image and use it like simple image in border-image-source: url(/path/to/image.svg);

    hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

svg {
  width: 10rem;
}

.border { 
  border-width: 30px;
  border-style: solid;
  border-color: transparent;
  padding: 15px;
  border-image-slice: 30 fill;
  border-image-width: 30px;
  border-image-outset: 0;
  border-image-repeat: round;
  width: 300px;
}

.border--final {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 90 90'%3E%3Cdefs%3E%3Cpath id='main' d='M88.9 27.8H62.2V9.1h13.1v4.2h-6.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .7.4 1.1 1.1 1.1h14.7c.7 0 1.1-.4 1.1-1.1v-18c0-.2-.1-.4-.2-.6h4.1c.7 0 1.1-.4 1.1-1.1S89.6 0 88.9 0H1.1C.4 0 0 .4 0 1.1s.4 1.1 1.1 1.1H23c-.1.1-.2.3-.2.6v16.9H10.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H1.7C1 6.9.6 7.3.6 8v20.9c0 .7.4 1.1 1.1 1.1h87.2c.7 0 1.1-.4 1.1-1.1 0-.7-.4-1.1-1.1-1.1zm-6.1-25v16.9H70.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H61.1c-.7 0-1.1.4-1.1 1.1v19.8H32.2V9.1h13.1v4.2h-6.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .7.4 1.1 1.1 1.1h14.7c.7 0 1.1-.4 1.1-1.1v-18c0-.2-.1-.4-.2-.6h28.1c0 .1-.1.4-.1.6zm-80 6.3h12.4v4.2H9.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .8.4 1.2 1.1 1.2h14.7c.7 0 1.1-.4 1.1-1.1V2.8c0-.2-.1-.4-.2-.6h28.1c-.1.1-.2.3-.2.6v16.9H40.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H31.1c-.7 0-1.1.4-1.1 1.1v19.8H2.8V9.1z'%3E%3CanimateTransform fill='remove' accumulate='none' additive='replace' attributeName='transform' attributeType='XML' calcMode='linear' dur='2s' from='0 0' repeatCount='indefinite' restart='always' to='-30 0' type='translate'/%3E%3C/path%3E%3C/defs%3E%3CclipPath id='clip1'%3E%3Crect x='0' y='0' width='30' height='30' /%3E%3C/clipPath%3E%3Cuse clip-path='url(%23clip1)' href='%23main' x='0' /%3E%3Cuse clip-path='url(%23clip1)' href='%23main' x='30' /%3E%3Cuse clip-path='url(%23clip1)' href='%23main' x='60' /%3E%3Cg transform='scale(-1 1) translate(-90 0)'%3E%3Cuse clip-path='url(%23clip1)' href='%23main' x='0' y='60' /%3E%3Cuse clip-path='url(%23clip1)' href='%23main' x='30' y='60' /%3E%3Cuse clip-path='url(%23clip1)' href='%23main' x='60' y='60' /%3E%3C/g%3E%3C/svg%3E");
}

.border--explanation {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 90 90'%3E%3Cdefs%3E%3Cpath id='main' d='M88.9 27.8H62.2V9.1h13.1v4.2h-6.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .7.4 1.1 1.1 1.1h14.7c.7 0 1.1-.4 1.1-1.1v-18c0-.2-.1-.4-.2-.6h4.1c.7 0 1.1-.4 1.1-1.1S89.6 0 88.9 0H1.1C.4 0 0 .4 0 1.1s.4 1.1 1.1 1.1H23c-.1.1-.2.3-.2.6v16.9H10.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H1.7C1 6.9.6 7.3.6 8v20.9c0 .7.4 1.1 1.1 1.1h87.2c.7 0 1.1-.4 1.1-1.1 0-.7-.4-1.1-1.1-1.1zm-6.1-25v16.9H70.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H61.1c-.7 0-1.1.4-1.1 1.1v19.8H32.2V9.1h13.1v4.2h-6.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .7.4 1.1 1.1 1.1h14.7c.7 0 1.1-.4 1.1-1.1v-18c0-.2-.1-.4-.2-.6h28.1c0 .1-.1.4-.1.6zm-80 6.3h12.4v4.2H9.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .8.4 1.2 1.1 1.2h14.7c.7 0 1.1-.4 1.1-1.1V2.8c0-.2-.1-.4-.2-.6h28.1c-.1.1-.2.3-.2.6v16.9H40.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H31.1c-.7 0-1.1.4-1.1 1.1v19.8H2.8V9.1z'%3E%3CanimateTransform fill='remove' accumulate='none' additive='replace' attributeName='transform' attributeType='XML' calcMode='linear' dur='2s' from='0 0' repeatCount='indefinite' restart='always' to='-30 0' type='translate'/%3E%3C/path%3E%3C/defs%3E%3CclipPath id='clip1'%3E%3Crect x='0' y='0' width='30' height='30' /%3E%3C/clipPath%3E%3Cuse clip-path='url(%23clip1)' href='%23main' fill='red' x='0' /%3E%3Cuse clip-path='url(%23clip1)' href='%23main' fill='blue' x='30' /%3E%3Cuse clip-path='url(%23clip1)' href='%23main' fill='pink' x='60' /%3E%3Cg transform='scale(-1 1) translate(-90 0)'%3E%3Cuse clip-path='url(%23clip1)' href='%23main' fill='green' x='0' y='60' /%3E%3Cuse clip-path='url(%23clip1)' href='%23main' fill='black' x='30' y='60' /%3E%3Cuse clip-path='url(%23clip1)' href='%23main' fill='tomato' x='60' y='60' /%3E%3C/g%3E%3C/svg%3E");
}
    <p>SVG border animation</p>
<div class="border border--final"></div>

<hr />

<p>SVG border animation explanation</p>
<div class="border border--explanation"></div>

<hr />

<p>Inline animated SVG image with comments<p>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 90 90">
  <!-- define main path with lines; this will hide general picture -->
  <defs>
    <!-- general path that can be reusable -->
    <path id="main" d="M88.9 27.8H62.2V9.1h13.1v4.2h-6.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .7.4 1.1 1.1 1.1h14.7c.7 0 1.1-.4 1.1-1.1v-18c0-.2-.1-.4-.2-.6h4.1c.7 0 1.1-.4 1.1-1.1S89.6 0 88.9 0H1.1C.4 0 0 .4 0 1.1s.4 1.1 1.1 1.1H23c-.1.1-.2.3-.2.6v16.9H10.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H1.7C1 6.9.6 7.3.6 8v20.9c0 .7.4 1.1 1.1 1.1h87.2c.7 0 1.1-.4 1.1-1.1 0-.7-.4-1.1-1.1-1.1zm-6.1-25v16.9H70.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H61.1c-.7 0-1.1.4-1.1 1.1v19.8H32.2V9.1h13.1v4.2h-6.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .7.4 1.1 1.1 1.1h14.7c.7 0 1.1-.4 1.1-1.1v-18c0-.2-.1-.4-.2-.6h28.1c0 .1-.1.4-.1.6zm-80 6.3h12.4v4.2H9.1c-.7 0-1.1.4-1.1 1.1v6.4c0 .8.4 1.2 1.1 1.2h14.7c.7 0 1.1-.4 1.1-1.1V2.8c0-.2-.1-.4-.2-.6h28.1c-.1.1-.2.3-.2.6v16.9H40.2v-4.1h6.1c.7 0 1.1-.4 1.1-1.1V8c0-.7-.4-1.1-1.1-1.1H31.1c-.7 0-1.1.4-1.1 1.1v19.8H2.8V9.1z">
      <!-- creating animation - translate by X; indefinite animation -->
      <animateTransform fill="remove" accumulate="none" additive="replace" attributeName="transform" attributeType="XML" calcMode="linear" dur="2s" from="0 0" repeatCount="indefinite" restart="always" to="-30 0" type="translate"/>
    </path>
  </defs>

  <!-- creating clip path to clip each path -->
  <clipPath id="clip1">
    <rect x="0" y="0" width="30" height="30" />
  </clipPath>

  <!-- using main (general) lines and placing to related region -->
  <use clip-path="url(#clip1)" href="#main" fill="red" x="0" />
  <use clip-path="url(#clip1)" href="#main" fill="blue" x="30" />
  <use clip-path="url(#clip1)" href="#main" fill="pink" x="60" />

  <!-- using main (general) lines but reverted -->
  <g transform="scale(-1 1) translate(-90 0)">
    <use clip-path="url(#clip1)" href="#main" fill="green" x="0" y="60" />
    <use clip-path="url(#clip1)" href="#main" fill="black" x="30" y="60" />
    <use clip-path="url(#clip1)" href="#main" fill="tomato" x="60" y="60" />
  </g>
</svg>