前端之家收集整理的这篇文章主要介绍了
html5 – 每次重复时SVG动画延迟，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我想为SVG动画循环的每次迭代
添加一个延迟.这是一个简单的例子.
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
<circle cx="50" cy="50" r="15" fill="blue">
<animate id="op" attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
使用begin只会延迟第一次迭代,那么有没有办法延迟每次迭代？
您可以将SMIL动画元素的结束事件
添加到
begin属性.
此外,您可以
添加多个值,以;分隔;到这个开始
属性：
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<circle cx="50" cy="50" r="15" fill="blue">
<animate id="op" attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="3s" begin="3s;op.end+3s" />
</circle>
</svg>
原文链接：https://www.f2er.com/html5/168807.html
