用@keyframes定义动画需命名合法（如slide-in）、关键帧用from/to或0%/100%、属性值带单位；必须配合animation-name和animation-duration才能生效，且名称严格一致、duration非零、避免触发布局的高成本属性。
怎么用 @keyframes 定义一段基础动画轨迹
直接写名字 + 花括号，里面用百分比或 from/to 标记关键帧位置。名字不能带空格、不能以数字开头，比如 slide-in 可以，1st-anim 不行（会解析失败）。
常见错误是漏写单位：比如把 transform: translateX(100) 写成 translateX(100) —— 缺少 px 或 %，浏览器直接忽略这一帧。
-
from等价于0%，to等价于100%，二者可混用，但别写from和0%重复定义 - 中间帧（如
50%）必须落在 0–100% 范围内，120%会被忽略 - 同一关键帧里写多个属性（
opacity、transform、color）没问题，但不支持display切换（display: none在关键帧中无效）
为什么动画没跑？检查这三处硬性限制
@keyframes 本身只是声明，不触发任何效果；必须配合 animation-name 和 animation-duration 才能生效。光写关键帧，DOM 元素上没挂 animation 相关属性，等于写了函数没调用。
- 名字拼错最常见：
animation-name: slideIn但@keyframes声明的是slide-in—— 大小写、连字符、下划线全要严格一致 -
animation-duration为0s或未设置，动画不会播放（哪怕animation-iteration-count是infinite） - 元素初始状态和
0%关键帧完全一致，且没设animation-fill-mode，可能看起来“动了一下就回弹”，其实是按默认none行为执行的
animation-timing-function 怎么影响关键帧之间的过渡
它不控制关键帧“什么时候出现”，而是决定两帧之间**怎么动**——是匀速、先快后慢，还是抖两下。默认是 ease（缓入缓出），不是线性。
立即学习“前端免费学习笔记（深入）”；
-
linear：匀速，适合机械感强的位移（比如进度条填充） -
ease-in-out：开头结尾都慢，中间快，适合模态框淡入淡出 - 自定义贝塞尔曲线：
cubic-bezier(0.34, 1.56, 0.64, 1)超出 [0,1] 范围是允许的，能做出弹性/回弹效果 - 注意：
step-start/step-end会让动画变成“逐帧跳变”，不插值 —— 适合数字翻牌、加载点动画等场景
兼容性和性能要注意的关键点
所有现代浏览器都支持标准 @keyframes，但老版本 Android WebView（≤4.3）或 iOS Safari ≤8 需要 -webkit- 前缀。不过现在基本可忽略前缀，除非明确要兼容 2015 年前的设备。
性能上，频繁变更 left/top 触发重排，而 transform 和 opacity 走合成层，更安全。所以关键帧里优先用 transform: translateX() 而不是 left: 100px。
- 避免在关键帧里改
height、width、margin等触发布局的属性 - 大量元素同时播复杂关键帧动画，可能卡顿；可用
will-change: transform提前提示浏览器优化（但别滥用） -
@keyframes无法访问 JS 变量，也不能嵌套或条件生成；需要动态控制时，得靠 JS 操作style.animationName或切换 class
关键帧动画看着简单，真正卡住人的地方往往不在语法，而在「声明了但没绑定」「绑定了但初始态吃掉了第一帧」「用了高成本属性导致掉帧」——这些细节不报错，但就是不动或动得不对。
