HTML5中SVG控制动画循环次数与往返运动逻辑-H5教程-PHP中文网

SVG动画往返循环需用CSS的animation-direction:alternate配合iteration-count，repeatCount仅控制单向重复；往返1次即1个正+返周期，fill:backwards可使结束停起点。

html5中svg控制动画循环次数与往返运动逻辑

SVG动画的循环次数和往返运动（即来回播放）主要通过标签的 repeatCount 和 repeatDur 属性控制，而往返效果则依赖 calcMode 与 keyTimes 配合，或更简洁地使用 fill + direction 的 CSS 动画方案。原生 SVG SMIL 动画虽在部分新浏览器中被逐步限制，但逻辑仍具参考价值；现代推荐结合 CSS @keyframes 实现更稳定、可维护的往返循环。

用 repeatCount 控制固定循环次数

repeatCount 是最直接的方式，指定动画重复执行的整数次（如 repeatCount="3" 表示播放 1 次原始 + 重复 2 次，共 3 轮）。设为 "indefinite" 则无限循环。

只对单向动画生效（默认 direction="normal"）
若需“播放 3 次后停止”，写 repeatCount="2"（首次为默认播放，再重复 2 次）
不支持小数，如 repeatCount="2.5" 无效，会被截断为 2

实现往返运动（来回播放）的两种主流方式

往返即：正向播完 → 反向回播 → 正向再播……形成“往-返-往-返”节奏。SVG 本身不提供 alternate 这类属性，需手动构造。

SMIL 方式（兼容性尚可，但 Chrome 100+ 已禁用内联 SMIL）：用两段，第一段 dur="1s" 正向，第二段 begin="1s" + dur="1s" 反向，再用 repeatCount="indefinite" 包裹整个序列（需包裹在或借助协调）
CSS @keyframes 方式（推荐）：给 SVG 元素（如）添加 class，用 animation-direction: alternate; + animation-iteration-count: 3; 即可实现“3 次往返”（即 3 个完整往+返周期，共 6 次单向运动）

关键细节：往返 ≠ 循环次数 × 2

很多人误以为 iteration-count: 3 + direction: alternate = 播放 3 次正向 + 3 次反向。实际是：每 1 次 iteration 包含 1 次正向 + 1 次反向（即一个完整往返）。所以：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

animation-iteration-count: 2 → 往返 2 次（正→返→正→返）
若只要“正向 1 次 + 反向 1 次”，就设 count: 1
想实现“正→返→正”（奇数段，末尾停在起点），可用 animation-direction: alternate-reverse 或拆成两段 CSS 动画衔接

补充：用 JavaScript 精确控制 SVG 动画状态

当需要动态切换循环次数或中途启停往返，CSS 动画可通过 JS 修改 style.animationIterationCount 或切换 class；SMIL 则调用 beginElement()/endElement()，但兼容性差。更稳妥的做法是用 requestAnimationFrame 手写缓动逻辑，尤其适合路径描边（stroke-dasharray + stroke-dashoffset）等复杂场景。

不复杂但容易忽略：往返动画的 fill: forwards 会让最终帧保持在“返程终点”，若希望停在起始位置，应设 fill: backwards 或用 JS 重置属性。