百分比关键帧必须包含0%和100%，否则动画被忽略；属性需可插值，如width:auto、display无效；复合变换须完整声明；动画序列靠百分比切片实现，不支持条件跳转；推荐用整数百分比和cubic-bezier控制缓动。
百分比关键帧必须覆盖 0% 和 100%，否则动画可能不触发
浏览器要求 @keyframes 至少包含 0%（或 from）和 100%（或 to）两个关键帧，否则整个动画规则会被忽略——哪怕你只写 25%、50%、75%，动画也不会执行。
实操建议：
- 始终显式写出
0%和100%，避免依赖from/to别名（部分旧版 Safari 对别名解析不稳定） - 如果想让元素“起始即处于中间状态”，在
0%中设置该状态，而不是删掉它 - 动画属性如
transform、opacity在各关键帧中必须可插值；比如0% { display: none }→100% { display: block }无效，display不支持过渡
多个百分比帧之间是线性插值，但需注意属性是否支持渐变
CSS 动画引擎对每个属性在相邻关键帧间做线性插值。但不是所有属性都支持：比如 height: auto、margin: auto、font-family（字体族名不可插值）、background-image（渐变路径可插值，但图片 URL 不可）都会导致该属性在对应区间“卡住”或回退到初始值。
常见踩坑场景：
立即学习“前端免费学习笔记（深入）”；
-
0% { width: 100px; } 50% { width: auto; } 100% { width: 200px; }→50%的auto无法参与插值，浏览器通常丢弃该帧的width声明，直接从100px线性变到200px - 用
color+hsl()比rgb()更易控制中间色相变化，因为hsl(0, 100%, 50%)→hsl(120, 100%, 50%)是平滑色相过渡，而rgb(255,0,0)→rgb(0,255,0)会经过暗沉的黄绿色中间态 - 复合变换如
transform: rotate(0deg) scale(1)必须在每个关键帧中完整写出，不能只写rotate()；否则未声明的部分会重置为none
动画序列能嵌套，但不能靠 @keyframes 内部“跳转”实现条件分支
@keyframes 本身是纯声明式时间轴，没有 if/else、循环或延迟跳转。所谓“多阶段序列”，本质是把多个动画效果按时间切片铺在一条 0%→100% 轴上，靠百分比定位动作节奏。
例如实现“淡入 → 平移 → 缩放 → 淡出”四段：
@keyframes sequence {
0% { opacity: 0; transform: translateX(-20px) scale(0.9); }
25% { opacity: 1; transform: translateX(0) scale(0.9); }
50% { opacity: 1; transform: translateX(0) scale(1.1); }
75% { opacity: 1; transform: translateX(0) scale(1); }
100% { opacity: 0; transform: translateX(20px) scale(0.95); }
}
要点：
- 每段持续时间 = 后一关键帧 % − 前一关键帧 %，如 25%−0% = 25%，即总时长的 1/4
- 若需某段“暂停”，就在两个相同百分比帧中设相同样式（如
40% { opacity: 1; } 60% { opacity: 1; }），中间 20% 区间保持静止 - 无法用
@keyframes实现“点击后跳到 70%”或“完成 A 段再播 B 段”，那得靠 JS 控制animation-play-state或切换多个@keyframes类名
浏览器对小数百分比和重复帧的处理不一致，慎用 0.1% 这类精度
Chrome 和 Firefox 支持 0.5%、99.9%，但 Safari（尤其 iOS 15 及更早）可能四舍五入到整数百分比，导致关键帧错位或丢失。同时，重复定义同一百分比（如写了两个 30%）时，后声明的会覆盖前一个，但部分 Android WebView 会报解析错误。
稳妥做法：
- 只用整数百分比：0、25、50、75、100 —— 足够表达大多数节奏分段
- 避免
0.0001%或99.9999%这类“绕过 0%/100% 约束”的取巧写法，既无必要又降低兼容性 - 用
animation-timing-function（如cubic-bezier(.42,0,.58,1)）调节每段内部缓动，比堆砌多个 1% 帧更可靠
真正难的不是写多少个百分比，而是判断哪几个节点必须精确控制状态——多数 UI 动画，5–7 个关键帧已足够清晰传达意图。多余帧反而增加维护成本和渲染不确定性。
