Why doesn't all of my animated border animate?-CodePudding

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

Image link

But when I apply the class to a paragraph, only the corner tiles 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/mino/border.gif);
  border-image-repeat: round;
  border-image-slice: 30;
}

<p >A paragraph.</p>

CodePudding user response：

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,");
}

.border--explanation {
  border-image-source: url("data:image/svg xml,");
}

<p>SVG border animation</p>
<div ></div>

<hr />

<p>SVG border animation explanation</p>
<div ></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>