编码前啰嗦一句这篇不是教程翻译是我自己最近用一个模拟项目X的加载效果时踩出来的实战总结。项目里需要做一组“组合动画”而且这组动画要循环播放次数还得能控制比如默认转3圈操作失败转5圈全部结束还得有个体面的收尾动画。原本以为一行animation: xxx 1s infinite就能搞定真做起来才发现坑位密集尤其在“可控次数”这个前提下稍不留神计数器就飘了。如果你也在用CSS动画做类似的效果这篇文章应该能帮你少走不少弯路。1. 组合动画循环的典型场景与方案选型1.1 什么情况会用到“组合动画 可控次数”我遇到的实际场景是某个状态提示组件需要一个雷达扫描式的加载图标。设计稿上是一个中心圆点不停旋转同时一圈光波从中心向外扩散消失整个效果要连续播放3次后整个雷达图标渐变淡出。这个需求拆开看有两个关键点一是“组合动画”也就是同一时间有两组甚至三组动画在跑二是“可控次数”不是一直无限循环而是明确播完N轮后停下来。这类需求其实哪里都有。状态页的加载动画、引导页的动效、操作成功或失败后的反馈动画、游戏里角色受击闪白都属于组合动画加次数控制的范畴。尤其是加载失败或成功后的动效总不能让它无限转下去就必须通过某种机制在N轮结束后主动掐断。纯粹做“一次”动画很简单做“无限”动画也不难难点在于“组合动画”和“可控次数”叠加在一起。因为一旦涉及组合就会同时触发多个元素的动画结束事件到底以哪个事件为准、事件触发了多少次、中间有没有错过事件这些都是设计计数方案时绕不开的问题。1.2 可以选的技术方案对比我在动手前大概梳理了三条路这里先做个选型分析后面实操环节会基于这个结论展开。方案A纯CSS配合animation-iteration-count: N写死循环次数简单粗暴。方案BCSS动画先设成infinite再由JS统计animationend事件播够N轮后把animation-play-state切到paused。方案C用Web Animations API即element.animate()通过iterations参数直接控制循环次数并监听finish事件。方案A表面上最省事但埋了一个大坑组合动画里的每个元素如果都设iteration-count: 3animationend事件会分别触发每个元素触发的次数都一样你得自己把“元素数量 × 轮次”换算成真正的“轮次”。而且想要在动画最终结束时追加一段淡出动画靠纯CSS很难优雅衔接因为淡出动画和循环动画是两段独立的animation强行写在同一个元素上会互相干扰。方案C是未来趋势代码直观、控制能力强但兼容性要求比较高在一些需要兼容旧内核的场景里还得降级处理。做内部工具类项目时我会优先用C但如果是面向真实用户的H5或页面突然引用一个旧内核不支持Web Animations API的分支逻辑收益并不高。方案B是我最终采用的方案。组合动画的每个元素单独监听animationend通过统计事件次数来判断“一轮组合是否结束”。这个方案最灵活后续想要“总共播5轮”还是“中途紧急停在第2轮”都只需要调整JS计数逻辑。类似的事件模式和真实项目里处理异步回调的套路是一致的。我自己的经验是优先选方案B除非明确只在现代环境跑高保真动效才考虑方案C。2. animation参数与组合编排的容易错点2.1 多个动画同名缩写时的“隐形联动”组合动画最常见的写法是在一个元素上通过逗号叠加多个动画形如.element { animation: spin 1s linear infinite, pulse 0.4s ease-out 2; }这个写法本身没毛病但有个隐藏规则特别容易忽略缩写属性里缺省的部分会被重置。比如spin 1s linear infinite没写delay默认就是0pulse 0.4s ease-out 2没写iteration-count之外的fill-mode默认就是none。如果同一元素上还要加一个淡入动画而且你忘了在缩写里写fill-mode: backwards动画还没开播元素就瞬间闪到初始状态观感很糟。更隐蔽的坑在于当多个动画作用在同一个元素上时animationend事件会“按每个动画分别触发一次”而不是合并只触发一次。也就是说如果上面这个.element播了3轮你可能会收到spin的3次end和pulse的2次end。要在这个基础上判断“整体播完没”就得先弄清哪个动画是主循环、哪个是辅循环否则计数完全对不上。为了简化我在实操里尽量把一个“组合”的元素拆开主循环动画放在父元素辅助动画放在子元素或伪元素。这样每个元素只有一个animation事件一一对应逻辑清晰也方便后面JS单独控制某个元素的播放状态。2.2 iteration-count、fill-mode、play-state三个参数的爱恨纠葛先说iteration-count。它可以写成整数也能写成小数比如0.5表示只播一半还支持infinite。但这里有个容易误解的地方infinite并不是“一直不触发animationend”而是“每次循环结束都会触发一次animationend”触发之后循环继续。所以监听animationend时如果动画还在播放这个事件会反复来只有当动画真的停下来比如paused或移除才不再触发。然后是fill-mode。暂停或结束时元素会停在哪个状态完全看这个参数。常见组合是forwards让动画停在最后一帧。如果你用JS在播到一半时把animation-play-state设成paused且fill-mode为none元素会瞬间跳回第一帧那种“啪”一下回闪的视觉问题大多就是这么来的。要在指定轮次结束后稳稳停在结束画面记得把fill-mode设为forwards或用JS在暂停后直接覆写元素的transform/opacity之类属性。还要注意animation-play-state: paused和display: none的行为有本质区别。前者是“冻结在暂停画面里”动画计时暂停后者是“直接把动画状态从元素上剥离”下次display恢复时动画会从头重播。这个区别在我后面的4.2里专门踩过一次。2.3 组合动画的公共周期设计组合动画里所有子动画的时长、延迟、循环次数之间必须存在一个共同周期否则“整体轮次”无从谈起。比如一个动画1秒循环另一个动画0.5秒循环两者相切关系能算出公共周期是1秒但视觉上依然会出现“不同步抖动”。我在设计组合动画时习惯让所有子动画的时长保持一致或比值为整数倍并尽量不设置小数延迟。这个习惯帮我省掉了大量莫名其妙的计数错位问题。如果某个子动画需要有节奏差异就用“整数倍的 delay”打配合例如一个动画在0s开始、另一个在0.3s开始同时动画的总时长还是整数倍这样公共周期不会被破坏。这么设计背后有个很实在的原因JS用animationend统计“轮次”时依赖的是每个子动画在同一时刻交出结束信号。如果子动画时长不一致且没有公共周期结束信号会交错到达计数器就无法形成类似“每收到2个事件就算完成一轮”的简洁规则。3. 实操案例可控制循环次数的组合动画3.1 先用一段完整代码展示最终效果这里拿雷达扫描的案例来演示。最终效果是中心圆点旋转外围光波不断扩散淡出两者同时进行循环3轮后雷达整体淡出隐藏。我先把final结构的代码放出来后面拆开逐行解释。HTML结构div classradar idradar div classradar__ring/div div classradar__core/div /divCSS样式.radar { position: relative; width: 120px; height: 120px; } .radar__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(74, 140, 255, 0.6); animation: ringPulse 1s ease-in-out 1s infinite backwards; } .radar__core { position: absolute; inset: 12px; border-radius: 50%; background: #4a8cff; animation: coreSpin 1s linear 1s infinite backwards; } .radar--done { animation: radarOut 0.6s ease-in forwards; } keyframes ringPulse { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } keyframes coreSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } keyframes radarOut { to { opacity: 0; visibility: hidden; } }JS控制const radar document.getElementById(radar); const ring document.querySelector(.radar__ring); const core document.querySelector(.radar__core); const TOTAL_ROUNDS 3; const VALID_NAMES [ringPulse, coreSpin]; let eventCount 0; let finishedRounds 0; function onAnimationEnd(event) { if (!VALID_NAMES.includes(event.animationName)) return; eventCount eventCount 1; // 每收到两个事件说明一轮组合循环完成 if (eventCount % 2 0) { finishedRounds finishedRounds 1; if (finishedRounds TOTAL_ROUNDS) { ring.style.animationPlayState paused; core.style.animationPlayState paused; radar.classList.add(radar--done); } } } ring.addEventListener(animationend, onAnimationEnd); core.addEventListener(animationend, onAnimationEnd);这里有个小细节我给两个动画都写了1s infinite为什么还要在后面加一个1s的延迟因为我希望雷达打开页面后先等1秒再开始扫视觉上比较自然。延迟1秒依然在整数范围内两个动画同时延迟、同时启动、同时提交结束事件公共周期没有被破坏。3.2 解析计数逻辑的设计思路计数逻辑是整个方案的核心我把它拆开讲。初始eventCount 0finishedRounds 0。每有一个动画结束就触发一次animationend并且事件对象里面带着animationName字段。我先用VALID_NAMES数组过滤掉无关动画的事件防止组件里其他不在计划内的动画干扰计数。当eventCount到达2时意味着“本轮的两个子动画都交了一次结束信号”所以finishedRounds加1。第3轮结束的时候finishedRounds变成3连忙把两个子动画的animation-play-state都改成paused然后给.radar容器加上radar--done类触发整体淡出。这个方式的优点在于不管有多少个子动画只要它们的时长严格对齐计数规则就是“每满元素个数加一次轮次”。如果将来组合里加第三个子动画只需要把它的事件过滤名加进VALID_NAMES再把取余数的地方从2改成3就行改动成本非常低。一个值得记下来的心得是过滤事件名这步不能省。真到了复杂页面里一个列表页可能有多个独立动画组件同时在播不过滤事件名旁边组件的animationend也会冒过来计数器很快乱掉。3.3 为什么要用paused而不是直接移除动画可能有朋友会问为什么不在轮次到点后直接把animation属性清空而是用paused我试过直接清空动画效果是这样的元素会一瞬间回到没有动画时的默认状态也就是变得空白、没有旋转角度、光波也复原到初始位置。因为animation是从关键帧之外定义的常规样式里取状态的删掉动画后所有动画期间的中间状态全部失效除非你在删除前一帧截取当前视觉。就算加了fill-mode: forwards清空动画同样会让forwards的保持效果失效因为“保持”也是基于动画状态来的。而animation-play-state: paused是冻结当前帧它会继续保留未播放完的循环结束帧且fill-mode: forwards依然能生效。所以答题起见暂停比移除稳妥得多。如果你想在动画结束后改变元素颜色、位移或透明度可以像案例里那样在暂停之后新增一个独立的radar--done类让淡出动画跑在容器父级上避免和正在暂停的子动画争抢状态。3.4 演练一个“紧急停止”扩展场景有时候不止是“播N轮停止”而是在用户连续点击时立刻停止当前动画重新开播。这很容易出现事件乱入的问题。举例用户在第1轮没播完时点了重试如果把动画元素重新display: none再恢复浏览器会重新初始化动画而JS那边已经监听了一个animationend新旧动画的事件混在一起计数器直接翻车。我当时的处理方法是重试时先移除旧的监听器再用element.getAnimations()把所有动画全部取消接着重置内部计数变量最后重新挂监听。因为getAnimations()拿到的动画对象可以直接调用cancel()这个API比display切换可靠得多而且不会触发残留的animationend事件。这个方案几乎可以推广到所有“动画重新开播”的场景。4. 踩坑实录常见问题与排查办法4.1 animationend触发次数不符合预期这是我刚开始做的时候最容易懵的坑。预期是“整个组合结束触发一次”实际上每个行的animationend都会触发。更麻烦的是animation如果不是finite而是infinite每次循环结束也会触发一次。所以如果你写了animation: spin 1s infinite想等它“结束”再处理那是等不到的事件会一次次来直到你把动画停掉。排查思路也比较固定在事件回调里把event.animationName打出来同时打印event.elapsedTime。通过这两个字段能确认是哪个动画、第几轮结束的事件。如果你的计数器飘了十有八九是混入了其他元素的动画事件或者同一元素上多动画嵌套导致的重复计数。部分旧内核不叫animationend而是webkitAnimationEnd现场排查时如果发现事件一直不进回调先确认一下浏览器版本和事件名是否匹配。现代浏览器只需监听animationend即可。4.2 display:none会强制重置动画这是我在做状态切换时踩到的。需求是加载出错后雷达动画停掉整体消失再次加载时重新显示雷达动画。我一开始用display: none隐藏加载区然后通过强制回流再display: block的方式重播结果发现动画不从头开始甚至会出现跳帧或偶发的第一个光波不扩散。原因是display: none会让元素从渲染树中移除动画状态一起被销毁。重新显示时浏览器把动画当成了新动画来启动但原有的animationend计数状态还残留在JS里旧事件可能刚触发完新动画的第一次结束事件跟着就来了两个逻辑交叉在一起自然混乱。正确做法是隐藏时不改display而是用visibility: hidden或opacity: 0这样动画依然挂在元素上重新显示时不会重置。真要彻底重置就用getAnimations().cancel()不要碰display。4.3 暂停后元素跳回第一帧我自己就亲眼见过暂停后图标瞬间闪成原始状态的情况。刚才说过了问题多半出在fill-mode上。如果fill-mode是默认的none动画结束后的所有状态都不会保留暂停时元素立即回到关键的0%状态。解决方案有两个。一个是直接设定fill-mode: forwards让暂停时保持最后一帧。另一个是如果你需要更精细的控制可以在暂停前先用getComputedStyle()读取当前元素的transform/opacity并手动覆写内联样式。这个办法在需要把当前帧状态再传给别人时会比较管用比如把当前旋转角度同步给某个HTMLCanvas画布。4.4 事件监听器的清理组合动画经常出现在模态框、路由页面等动态挂载卸载的场景里。如果组件销毁时忘了移除animationend监听器那么哪怕页面隐藏了动画还在后台继续播事件还会触发JS回调可能操作一个已经不存在的DOM节点控制台立刻一片报错。排查这类问题有一个比较明显的特征切换页面后再次进入动画播完一遍计数器竟然多出了好几轮甚至直接就跳到了finishedRounds TOTAL_ROUNDS的条件里。这就是旧监听器没清理、叠加触发导致的。所以我的习惯是在能拿到卸载钩子的组件里一定要在beforeunmount或对应生命周期中调用removeEventListener。如果是原生JS写的模块可以在初始化时闭包返回一个destroy函数把事件解绑和变量复位都收拢进去。4.5 常见问题速查表现象原因解决方案动画一直无限跑怎么都停不下来没有在满足条件时暂停动画播够N轮后设置animation-play-state: paused暂停时元素瞬间回跳到初始状态fill-mode未设置或设置错误改用fill-mode: forwards计数每次都多出几轮其他元素的animationend混入用event.animationName过滤名称display: none后再显示动画从头重播display会销毁动画状态不切display改用visibility或取消动画切换页面后监听器叠加触发事件监听器没有移除组件卸载时统一解绑并重置计数变量动画第二次开播时事件逻辑混乱旧事件未处理完新旧动画交错用getAnimations().cancel()干净重置这些坑单独看都不大但组合动画场景里好几个坑会叠加出现排查起来非常耗时。我踩过一圈以后的体会是不要依赖于“感觉能通”的写法一开始就把事件源、数值、状态生命周期理顺比事后扣最省时间。5. 顺手封装一个可复用工具函数5.1 封装思路与示例代码如果在项目里多个地方都需要“组合动画播N轮后收尾”每次复制JS计数逻辑显然是浪费。我把上面这套思路封装成一个轻量函数接收一组动画元素和对应动画名内部维护计数播完N轮后自动暂停并回调。function createLoopAnimation({ animations, rounds 1, onRoundEnd null, onComplete null }) { let eventCount 0; let finishedRounds 0; function handleEvent(event) { const matched animations.some( (item) item.el event.currentTarget item.name event.animationName ); if (!matched) return; eventCount eventCount 1; if (eventCount % animations.length 0) { finishedRounds finishedRounds 1; if (typeof onRoundEnd function) { onRoundEnd(finishedRounds); } if (finishedRounds rounds) { animations.forEach((item) { item.el.style.animationPlayState paused; }); if (typeof onComplete function) { onComplete(); } } } } animations.forEach((item) { item.el.addEventListener(animationend, handleEvent); }); return function destroy() { animations.forEach((item) { item.el.removeEventListener(animationend, handleEvent); }); }; }使用时和案例里的逻辑对应起来const destroy createLoopAnimation({ animations: [ { el: ring, name: ringPulse }, { el: core, name: coreSpin } ], rounds: 3, onRoundEnd(round) { console.log(当前完成第 ${round} 轮); }, onComplete() { radar.classList.add(radar--done); } }); // 页面卸载时调用 destroy();5.2 这个工具的边界条件与后续扩展思路这个工具函数有一个约束传入的每个元素上最好只有一个监听范围内的主动画而且所有动画的时长要严格对齐这样animations.length才能作为“一轮完成”的分母。如果你在一个元素上有多个动画叠加需要多传一个countPerElement的配置项或者手动提取事件源复杂度会上升不少。另外我把onRoundEnd和onComplete都留了回调位置。实际项目里onRoundEnd可以用来做每轮结束时的提示比如“已重试第2次”onComplete则用来做整体收尾可以是淡出、跳转也可以是上报埋点。这样工具函数就不仅限于动画本身还能和业务逻辑解耦。如果后续有更复杂的控制需求比如支持“前2轮播得快、第3轮播得慢”可以在动画层用两个不同duration的动画来实现也可以给工具加一个speedUp参数在某一轮触发时动态修改animation-duration。CSS变量可以配合这个方式能避免JS和CSS之间传递多个固定值。写在最后的一点建议我做这个组合动画前最大的误区是把动画想得太纯。动画不只是视觉层面的东西一旦要“可控制次数”它就像个异步状态机每个动画播完一轮是一个信号组合播完所有轮次是一个更大的信号收尾又是一个信号。信号之间要有明确的关联代码才不会陷入“为什么又多跑了一圈”的怪圈。建议所有做动画计数的朋友先画一张简易信号图把子动画结束事件、轮次递增事件、最终完成事件之间的关系确认好再开始写代码基本上能规避掉一大半的坑。另外一个小技巧调试这类动画时不妨把animation-duration临时调成0.2秒或更慢肉眼直接观察结束事件打印顺序是否和理论一致。真机上的1秒动画等人眼反应太慢情绪上也容易被反复的失败搞得焦躁。把duration放慢事件顺序一目了然等逻辑确认后再调回正常速度这个节奏比埋头看代码高效得多。