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

Question

现在，我想将我的简单动画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说，并不是所有的动画都可以使用使用SMIL的CSS。

Answer 1

下面是如何你转换的是SMIL动画成对应的CSS动画：

• 无论您animate标签有dur="2s"等等CSS动画的持续时间（animation-duration）也将是2s。您可以使用长手属性或使用下面代码片段中的短手属性来指定此值。
• 没有为您的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，动画利用的值，而不是仅仅from和to。在这种情况下，有三个分号分隔的值，因此列表中的第一个值在关键帧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>