animation-iteration-count 必须显式设置为 infinite 才能循环播放，否则默认为 1；简写 animation 时遗漏该值会导致只播一次；multiple 动画需按顺序配对 iteration-count；infinite 时用 animationiteration 而非 animationend 监听循环开始。
animation-iteration-count 必须显式写，否则浏览器按默认值 1 处理——动画播完就停，根本不会循环。
为什么写了 animation 却只播一次？
常见错误是用简写 animation 时漏掉迭代次数。比如：animation: spin 2s ease; 这行里没提 iteration-count，浏览器就自动补上 1，不是忽略、也不是继承，是硬编码的默认行为。
必须显式写出：animation: spin 2s ease infinite; 或分开写：animation-iteration-count: infinite;
-
0、-1、none都是无效值，会退回到1 - 小数合法，如
1.5表示正向播完 + 反向播一半 - 多个动画并存时（
animation-name: a, b;），animation-iteration-count: 2, infinite;按顺序一一对应
infinite 下 animationend 事件永远不会触发
想在每次循环结束时做点事？别等 animationend——它只在最后一次播放完才发，而 infinite 没有“最后一次”。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确做法是监听 animationiteration 事件，它在每次重复开始时触发：
element.addEventListener('animationiteration', () => {
console.log('又一圈开始了');
});
-
animationiteration在第 2 次、第 3 次……播放起始时刻触发，第一次不触发 - 若需首次也执行逻辑，得在动画启动前手动调一次
- 搭配
animation-direction: alternate时，animationiteration仍按“迭代次数”计，不是按方向切换次数
配合 alternate 实现往返循环时的衔接陷阱
animation-direction: alternate + animation-iteration-count: 3 表示“完整往返 3 次”，即：正→返→正→返→正→返。不是“正向 3 次 + 反向 3 次”。
关键在于 @keyframes 的 0% 和 100% 必须自然衔接，否则每次方向切换时会跳帧或闪动：
- 比如旋转动画，
0% { transform: rotate(0deg); }和100% { transform: rotate(360deg); }是平滑的；但若写成rotate(359deg)，反向时就会倒退 1 度，产生卡顿 - 位移动画中，
0%和100%的transform值应完全一致，或构成对称变化（如translateX(0)→translateX(100px)→translateX(0)） - 用
animation-fill-mode: forwards无法解决往返衔接问题，它只影响首尾静止状态
最易被忽略的一点：动画是否循环，和它是否“正在播放”无关——animation-play-state: paused 下，iteration-count 依然生效，只是暂停在当前帧；重开后继续计数，不会重置。
