Animation 动画之后，将SVG属性保持为最终值
我试图在加载SVG时设置一个圆的动画。它应当：Animation 动画之后，将SVG属性保持为最终值,animation,svg,Animation,Svg,我试图在加载SVG时设置一个圆的动画。它应当： 初始荷载为一组小尺寸（半径为1） 在设定的秒数后开始 将大小增加到设定大小（半径为17） 永远保持在这个半径 以下是我正在做的： <svg width="36px" height="36px"> <circle r="1" cy="18" cx="18"> <animate attributeName="r" from="1" to="17" dur="1s" begin="1s"><
<svg width="36px" height="36px">
<circle r="1" cy="18" cx="18">
<animate attributeName="r" from="1" to="17" dur="1s" begin="1s"></animate>
</circle>
</svg>
有人能告诉我如何播放动画直到结束，然后暂停动画，或者我缺少设置吗？使用fill=“freeze”
：
更多信息。詹姆斯的回答完全正确，回答了我的问题——但6年后，这根本不是我如何做到的。CSS动画似乎逐渐成为了与传统动画相比的首选路线
<animation />
回答不好。在SVG元素上运行CSS转换需要CPUexpensive@mate64我很想看看你们索赔的一些数据。如果这是真的，这并不是一个“糟糕的答案”。请做善良的人。
<animation />
@keyframes grow{
to{
r: 16;
}
}
circle{
animation: grow 3s forwards;
svg:nth-child(2) &{
animation-delay: 1s;
}
svg:nth-child(3) &{
animation-delay: 2s;
}
}