SMIL 到 CSS 动画：单个元素上的多个动画

Question

现在 SMIL is dying 我想将我的简单动画 SVG 转换为使用 CSS 动画，但我不太确定如何进行映射。在这个特定的 svg 中有两个动画元素。

#embedded {
  color: red;
 }

   <svg id="embedded"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
        <circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
        <circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
            <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
            <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
        </circle>
    </svg>

虽然一开始我似乎对这些 css 规则还不错，但很快就卡住了

stroke-dasharray: 150.6 100.4 1 250 150.6 100.4;
animation-duration: 2s;
animation-iteration-count: infinite;
stroke-dashoffset: ?;

完整的映射是什么样的？有可能吗？ Sara Soueidan 说并不是所有的动画都可以使用 CSS 而可以使用 SMIL。

Answer 1

下面是如何将 SMIL 动画转换为等效的 CSS 动画：

您的 animate 标签都有 dur="2s"，因此 CSS 动画的持续时间 (animation-duration) 也将是 2s。您可以使用 long-hand 属性或使用 short-hand 属性指定此值，如以下代码段所示。
没有为您的 animate 元素指定 calcMode 属性，因此插值模式为 linear。因为插值模式是linear，所以animation-timing-function也会是linear.
repeatCount 是 indefinite 因此 animation-iteration-count 将是 infinite。
对于stroke-dashoffset，动画只有一个从 (0%) 和一个到 (100%) 的值。因此，在 CSS 动画的关键帧中，我们将 stroke-dashoffset 指定为 0（from 值）在 0% 处指定为 502（to 值）在 100%.
对于 stroke-dasharray，动画使用 values 而不仅仅是 from 和 to。在这种情况下，有三个 semi-colon 分隔值，因此列表中的第一个值在 0% 关键帧中给出，列表中的第二个值在 50% 关键帧中给出，并且最后一个在 100% 关键帧选择器中给出。

#embedded, #embedded2 {
  color: red;
  width: 200px;
  height: 200px;
}
#embedded circle#animated {
  animation: demo 2s infinite linear;
}
@keyframes demo {
  0% {
    stroke-dashoffset: 0;
    stroke-dasharray: 150.6 100.4;
  }
  50% {
    stroke-dasharray: 1 250;
  }
  100% {
    stroke-dashoffset: 502;
    stroke-dasharray: 150.6 100.4;
  }
}

<svg id="embedded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
  <circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round" />
  <circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round" id="animated">
  </circle>
</svg>

<svg id="embedded2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
  <circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round" />
  <circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
    <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502" />
    <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4" />
  </circle>
</svg>

SMIL 到 CSS 动画：单个元素上的多个动画

SMIL to CSS Animation: multiple animations on single element

css

animation

smil

css-animations

svg-animate