SVG动画往返循环需用CSS的animation-direction:alternate配合iteration-count，repeatCount仅控制单向重复；往返1次即1个正+返周期，fill:backwards可使结束停起点。
SVG动画的循环次数和往返运动（即来回播放）主要通过 <animate></animate> 标签的 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）：用两段
<animate></animate>，第一段dur="1s"正向，第二段begin="1s"+dur="1s"反向，再用repeatCount="indefinite"包裹整个序列（需包裹在<g></g>或借助<set></set>协调） -
CSS @keyframes 方式（推荐）：给 SVG 元素（如
<circle></circle>）添加 class，用animation-direction: alternate;+animation-iteration-count: 3;即可实现“3 次往返”（即 3 个完整往+返周期，共 6 次单向运动）
关键细节：往返 ≠ 循环次数 × 2
很多人误以为 iteration-count: 3 + direction: alternate = 播放 3 次正向 + 3 次反向。实际是：每 1 次 iteration 包含 1 次正向 + 1 次反向（即一个完整往返）。所以：
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
立即学习“前端免费学习笔记（深入）”；
-
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 重置属性。
