关键帧百分比值不限于0%和100%，可任意添加0%–100%内不重复的中间值（如25%、63.7%），浏览器按升序解析并插值；顺序错乱（如0%、100%、50%）会导致忽略；@keyframes内不支持calc()或CSS变量；调试建议拉长动画时长、加视觉标记或用steps()验证。
关键帧百分比值不是只能写 0% 和 100%
很多人误以为 @keyframes 只能定义起始和结束状态，其实可以任意添加中间百分比，比如 25%、63.7%、99% —— 浏览器会按顺序插值渲染。只要数值在 0% 到 100% 范围内，且不重复，CSS 就能识别。
多个中间关键帧的声明顺序影响动画行为
浏览器严格按百分比数值升序解析关键帧；如果写成 0%, 100%, 50%，50% 会被忽略（因为位置错乱）。必须保证顺序递增：
@keyframes slideIn {
0% { transform: translateX(-100px); opacity: 0; }
30% { transform: translateX(20px); opacity: 0.6; }
75% { transform: translateX(-5px); opacity: 0.9; }
100% { transform: translateX(0); opacity: 1; }
}- 跳过某个百分比（如没写
50%）不会报错，只是该时刻沿用前一个关键帧的插值结果 - 两个相邻关键帧之间属性缺失（如
30%有opacity，75%没写），则该属性在整个区间线性过渡 - 想让某属性“突变”（不插值），得在两个紧邻百分比里显式写出相同值，例如：
49.9% { left: 0; } 50% { left: 100px; }
用 calc() 或 CSS 变量动态控制关键帧位置？不行
@keyframes 内部不支持 calc()、var(--x) 或任何表达式 —— 百分比值必须是字面量数字加 %。下面写法无效：
@keyframes bad {
0% { opacity: 0; }
calc(50% - 10%) { opacity: 1; } /* ❌ 语法错误 */
var(--midpoint) { transform: scale(1.2); } /* ❌ 不被解析 */
}若需动态关键帧位置，得靠 JavaScript 生成样式字符串并注入 ，或改用 Web Animations API 控制时间点。
立即学习“前端免费学习笔记（深入）”；
调试中间关键帧最有效的办法
浏览器开发者工具对关键帧调试支持有限，容易卡在“只看到首尾”。实际排查建议：
- 把动画时长拉长到
10s，肉眼观察各阶段停顿点 - 临时给每个关键帧加明显视觉标记：比如
30% { outline: 2px solid red; }，确认是否触发 - 用
animation-timing-function: steps(1, end)强制跳变，验证关键帧是否被加载（注意：这会禁用插值） - 检查是否被父级
transform或will-change干扰合成层，导致部分关键帧渲染异常
精确到小数点后一位的百分比（如 63.7%）完全合法，但除非有特殊节奏需求，否则没必要过度细分——人眼对毫秒级时序变化并不敏感，重点还是逻辑节点是否对齐业务动作。
