SVG动画设置延迟不生效，动画结束后立刻重复如何解决？

你配置不生效的核心原因是 <animateTransform> 标签中的 repeatCount="indefinite" 属性会让动画进入内置无限循环状态，永远不会触发动画的 end 事件，因此 begin 属性中定义的 op.end+3s 触发条件始终无法生效，动画会按照内置循环逻辑立刻重播。

解决方案 #

只需要删除 repeatCount="indefinite" 属性即可，依靠 begin 的多触发值配置就能实现带延迟的循环效果，不需要使用动画自带的无限重复能力。

修改后的完整代码如下：

<mask id="mask1_1_7" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="92" height="82">
<rect id="MovingLayer_2" width="92" height="82" fill="#C4C4C4">
<animateTransform id="op" 
                  attributeName="transform"
                  attributeType="XML"
                  type="translate"
                  from="0 0"
                  to="92 0"
                  dur="3s"
                  begin="0s;op.end+3s" 
                  />
</rect>
</mask>

修改后动画的运行逻辑为：首次0秒启动，用3秒完成从左到右的移动，移动结束后等待3秒，再次触发动画启动，完全符合你需要的「动画结束后延迟一段时间再重启」的需求。

内容的提问来源于stack exchange，提问作者Sebastian Salletmayer