animation-iteration-count设为2.5却只播2次或卡住，主因是关键帧缺失中间状态（如50%）、动画未真正启动或简写属性覆盖；需明确定义可停驻中间帧、确保动画完整触发且避免简写冲突。
animation-iteration-count 小数不生效的常见原因
设成 2.5 却只播了 2 次或卡在中间不动，不是浏览器 bug，而是关键帧定义或触发时机没对齐。小数值要求动画必须能“停在非整数百分比位置”，而很多基础写法默认只定义 0% 和 100%，浏览器无法插值到 50% 的中间状态。
- 关键帧缺失中间状态：若
@keyframes只有0%和100%，浏览器会把整个动画当作线性过渡处理，但小数次播放时无法确定“半次”该停在哪一帧——结果常是直接跳过或截断为整数次 - 动画未真正启动：元素处于
display: none、visibility: hidden或父容器overflow: hidden裁剪首帧，导致首次渲染失败，后续小数逻辑无从谈起 - 简写属性覆盖：用
animation简写（如animation: slide 2s）后又单独设animation-iteration-count: 2.5，会被简写规则静默重置为默认1
小数次播放必须满足的三个条件
要让 animation-iteration-count: 2.5 真正按预期停在 50% 进度点，三者缺一不可：
-
@keyframes中必须明确定义一个可停驻的中间关键帧（例如50%），且该帧的样式与前后有差异；否则浏览器认为“无变化”，直接跳过 - 动画必须完整触发一次：确保元素已挂载、可见、有尺寸，并且
animation-name与@keyframes名称**完全一致**（大小写、连字符、空格均敏感） - 避免用
animation简写覆盖：要么全用简写（如animation: slide 2s 2.5），要么全用独立属性，且animation-iteration-count必须在简写之后声明（CSS 层叠顺序决定）
IE11 和旧版 Safari 对小数值的支持限制
IE11 完全不支持小数次播放，会静默降级为 floor(2.5) = 2；Safari ≤ 15.6 在某些复合 transform 场景下也会四舍五入为整数次。这不是配置错误，而是引擎能力边界。
- 测试时别只看 Chrome/Firefox：用 Safari 开发者工具的「Elements → Animation」面板确认是否真列出
2.5x条目 - 生产环境慎用小数值：若需精确控制停驻点，优先考虑 JS +
animationend事件监听 + 手动element.style.animationPlayState = 'paused' - 替代方案更稳：用
steps(5, end)配合 5 帧关键帧，再设iteration-count: 2，视觉上等效于 2.5 次节奏感更强
为什么改了 iteration-count 但动画没重播？
CSS 动画的迭代计数器是“一次性绑定”的：它只在动画首次计算样式时读取当前值。JS 中动态改 element.style.animationIterationCount = "2.5" 不会重置已结束的动画，也不会让暂停态重新开始。
- 想强制重播并应用新次数：先移除动画类 →
void element.offsetWidth（触发重排）→ 再加回类 - 或者用
animation-play-state: paused+animation-duration: 0.001s骗过浏览器重置上下文（兼容性略差但免 DOM 操作） - 最可靠的方式仍是用
animationend事件手动计数，在第 2 次结束后检查是否需停在中间帧，然后用 JS 设置终态样式
2.5，而是让整个链路都承认这个数字有意义。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
