@keyframes规则必须包含0%和100%（或from/to），命名需合法且大小写严格匹配，仅支持可动画属性，优先使用transform和opacity以避免重排，animation-duration不可为0s。
@keyframes 规则必须包含 0% 和 100%（或 from/to）
浏览器只认完整的时间锚点：如果只写 50% 和 100%，动画不会触发。哪怕你只想让元素从中间状态开始动，也得补上 0% 或 from —— 这不是可选，是硬性要求。
常见错误现象：@keyframes slide { 25% { transform: translateX(100px); } 100% { transform: translateX(0); } } → 动画完全不执行。
- 正确写法必须含起始和终点，例如
from+to，或0%+100% - 中间节点（如
25%、75%）可自由增删，但首尾缺一不可 - 命名不能含空格、特殊符号或数字开头，
@keyframes my-animation合法，@keyframes 1st-move非法
关键帧内只能用可动画属性，且避免触发布局重排
不是所有 CSS 属性都能插值动画。像 display、height（当内容高度不确定时）、margin 等会引发 layout 的属性，不仅动画卡顿，还可能跳变或失效。
性能影响明显：每帧都重排 = 动画掉帧。Chrome DevTools 的“Rendering”面板里勾选“Paint flashing”，就能看到红色闪烁区域。
- 优先用
transform（translateX、scale、rotate）和opacity，它们走合成层，GPU 加速 -
left/top虽能动，但依赖定位上下文，易受父容器影响，不如transform可靠 - 颜色类属性（
color、background-color）支持良好，但注意十六进制色值不能直接过渡到 rgba，需统一格式
animation-name 必须与 @keyframes 名称严格一致
大小写、连字符、下划线都算不同名称。写成 animation-name: fadeIn，但 @keyframes fadein 就完全无效 —— 浏览器不会报错，只是静默忽略。
使用场景：多人协作或组件化开发时，容易因命名风格不统一导致动画“消失”。建议在项目初期约定命名规范，比如全小写+中划线（slide-in-card）。
- 检查方式：打开浏览器开发者工具 → Elements → 选中元素 → Styles 面板，确认
animation-name值是否被划掉（表示无效） - 多个动画可用逗号分隔：
animation-name: bounce, fade-in，但对应@keyframes必须全部存在 - 值为
none是默认值，显式写出等于禁用动画，慎用
动画未播放？先看 animation-duration 是否为 0s
animation-duration: 0s 是默认值，意味着“瞬间完成”，肉眼不可见。很多人定义完 @keyframes 就以为万事大吉，忘了加时长。
容易踩的坑：复制粘贴示例代码时，漏掉 animation-duration 或写成 0.5（缺单位），CSS 解析失败后该属性被丢弃，退回到 0s。
- 必须带单位：
1s、300ms，不能只写数字 - 若想“触发即停”效果（比如 hover 时闪一下），可用极短时间如
0.01s，而非0s - 搭配
animation-fill-mode: forwards才能保留最后一帧样式，否则动画结束立即回退
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
