为什么我的所有动画边框都没有动画？

Question

我有这张图片，我想将其用作边框：

但是当我将 class 应用到一个段落时，只有角落的拼贴动画。我该如何解决这个问题，以便整个边框滚动？

.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 class="border">A paragraph.</p>

Answer 1

我建议您不要使用 GIF 动画，而是使用 SVG 动画。查看代码片段。

在这个示例中，您可以看到 SVG 图像，其中为每个区域定义了动画，请查看 this article for more details。

在内联 SVG 中，您还可以找到评论。

Base64 SVG data using only like an example，您可以创建 SVG 图像并将其用作 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>

为什么我的所有动画边框都没有动画？

Why doesn't all of my animated border animate?

html

css

svg

svg-animate

border-image