必须显式写出0%和100%关键帧，否则浏览器直接忽略整个@keyframes规则；中间帧（如25%、50%）可选，但首尾缺一不可，且transform等属性需在每帧中完整声明以避免跳变。
必须显式写出 0% 和 100% 关键帧
浏览器会直接忽略没有 0% 和 100% 的 @keyframes 规则——哪怕你写了 25%、50%、75%，动画也不会启动。这不是兼容性问题，而是规范强制要求。
实操建议：
- 永远手动写
0%和100%，别依赖from/to别名（旧版 Safari 对from解析不稳定） - 如果想让元素“一开始就在中间状态”，就在
0%里设好那个样式，而不是删掉0% - 百分比用整数更稳妥，比如
33%比33.333%更少触发渲染精度误差
transform 必须在每个关键帧中完整声明
浏览器不会补全或继承上一帧没写的 transform 子属性。只写 scale(1.2)，等于把整个 transform 重置为 scale(1.2)，丢失之前所有的 translateX、rotate 等值，导致跳变。
常见错误现象：
- 元素突然回到左上角再动 —— 因为某帧漏写了
translateX - 旋转消失、缩放归零 —— 因为某帧只写了
rotate(90deg)，没带其他变换
正确写法示例：
@keyframes moveAndSpin {<br> 0% { transform: translateX(0) rotate(0deg) scale(1); }<br> 50% { transform: translateX(100px) rotate(0deg) scale(1); }<br> 100% { transform: translateX(100px) rotate(180deg) scale(0.9); }<br>}
多阶段时间分配要靠百分比切片，不是靠多个 animation
一个元素不能同时运行两个 @keyframes 动画（除非属性完全不冲突，且你手动控制 animation-name 切换）。所谓“多阶段”，本质是把整条时间轴切成几段，每段对应一个动作。
使用场景：
- 入场 → 高亮 → 收尾：用
0%、40%、80%、100%明确分界 - 先平移再旋转：把平移放在前半段，旋转放在后半段，中间点就是过渡拐点
- 想让某阶段“停住”一小会？加两个紧邻百分比，比如
60%和60.0001%，视觉上就是暂停
注意：animation-timing-function 是作用于整个动画的，不能单给某一段设缓动；如需差异化节奏，得靠百分比微调+分段插值（例如 0%→25% 用 ease-in，25%→100% 用 ease-out，靠手动拉长/压缩区间实现）
容易被忽略的属性可插值性限制
不是所有 CSS 属性都能在关键帧之间平滑过渡。浏览器对不可插值属性会直接丢弃该帧的声明，或回退到初始值，造成“卡住”或“突变”。
典型踩坑点：
-
display: none→display: block：无效，display不支持插值 -
width: auto出现在中间帧：浏览器无法计算，直接跳过该帧的width -
background-image: url(a.jpg)→url(b.jpg)：URL 不可插值，图片不会渐变 -
margin: auto或height: auto：同样无法参与插值
替代方案：
想切换显示状态，用 opacity + visibility；
想动态宽高，优先用 max-width/max-height + overflow: hidden；
颜色过渡推荐用 hsl() 而非 rgb()，避免中间色相失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
