关键帧百分比支持小数且语法合法，但问题在于插值逻辑与人眼预期错位、旧版浏览器四舍五入、关键帧过密被裁剪；需用两段式写法（如60%,79.999%{opacity:1;}）明确静态区间。
关键帧百分比不是整数会出问题吗
CSS 动画里 @keyframes 的百分比值本身支持小数，比如 12.5%、33.333% 都合法，浏览器也能解析。但问题往往不出在语法上，而在于动画插值逻辑与人眼预期错位：你写了 49.9% 和 50.1%，看起来像“瞬间切换”，实际浏览器仍会对这两个点之间做线性（或指定 timing-function）插值，导致属性值在 50% 附近轻微漂移。
- 小数百分比在 CSSOM 解析后可能被四舍五入（尤其旧版 Safari）
- 多个关键帧靠得太近（如
49.9%/50%/50.1%）容易触发渲染引擎的优化裁剪，跳过中间帧 - 使用
steps()时，百分比小数不影响阶跃逻辑，但和ease混用会加剧不一致感
想让某个状态“卡住”到精确时间点，该用什么写法
要实现“在 60% 时刻开始显示某样式，并持续到 80%”，不能只写 60% { opacity: 1; } 和 80% { opacity: 1; }——这会让浏览器认为“从 60% 到 80% 是过渡过程”。正确做法是显式定义起止状态：
60% { opacity: 0; }-
60.0001% { opacity: 1; }（或直接用60.001%） 79.999% { opacity: 1; }80% { opacity: 0; }
更稳妥的是用两段式写法：
@keyframes blink {
0%, 59.999% { opacity: 0; }
60%, 79.999% { opacity: 1; }
80%, 100% { opacity: 0; }
}
这样既避开小数精度争议，又明确告诉浏览器哪些区间保持静态。
transition 和 animation 在百分比控制上有什么根本区别
transition 没有百分比概念，它只响应属性变化的起始/结束值，中间过程由 timing-function 决定；而 @keyframes 的百分比是时间锚点，定义的是动画总时长中某一时刻的快照。
- 如果你发现“明明设了
75%，但元素在 74% 就开始变”，大概率是因为用了ease-out类缓动函数，它让变化集中在后半段，视觉上提前“启动” -
animation-timing-function: step-start或steps(1, start)可强制在关键帧生效点才跳变，但仅对离散变化有效（如visibility、transform的阶跃位移） - 对
opacity、color等连续属性，step 函数无法真正“卡住”，仍会插值，只是分段变
调试时怎么看实际执行的关键帧时间点
浏览器开发者工具的“动画检查器”（Animation Inspector）通常只显示关键帧标签和大致时间轴，不反映小数精度是否被修正。真要验证，得靠 JS 监听：
- 用
animationiteration和animationend只能捕获整体事件，不够细 - 更准的方式是结合
requestAnimationFrame打点采样：let startTime = performance.now(); element.animate(keyframes, { duration: 2000 }); function checkFrame() { const elapsed = performance.now() - startTime; const percent = (elapsed / 2000) * 100; console.log(percent.toFixed(3) + '%'); requestAnimationFrame(checkFrame); } checkFrame();
注意：这个方法测的是真实播放进度，不是声明的百分比——它能帮你确认浏览器是否在 60%（即 1200ms）真正应用了对应样式，还是因渲染延迟或插值策略偏移到了 1203ms。
关键帧百分比本身没“不精确”这回事，问题总出在人对“精确”的定义和浏览器对“时间锚点+插值”的实现之间。最常被忽略的是：你以为写了 50% 就等于“一半时间处立刻生效”，其实浏览器默认把它当做一个插值区间的中点，而非一个独立静止帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
