最简可用CSS动画需同时定义@keyframes和启用animation；@keyframes名须与animation-name完全一致，至少含from/to，且animation-duration不可为0s或省略。
CSS 动画不是加个 animation 就能动起来的——漏写 @keyframes、混淆 animation-fill-mode 和 animation-direction 的行为，是 80% 以上初学者卡住的地方。
怎么写一个最简可用的 CSS 动画？
必须同时满足两个条件：定义关键帧 + 在元素上启用动画。缺一不可。
-
@keyframes名字要和animation-name完全一致（区分大小写），比如@keyframes slideIn对应animation-name: slideIn - 至少得写两个关键帧，
from和to最安全；只写to或只写0%会导致动画不触发 - 元素必须有明确的
animation-duration（哪怕设成0.01s），值为0s或省略会直接失效
@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-20px); }
}
.box { animation: bounce 0.3s ease-in-out; }
animation-fill-mode: forwards 为什么经常被忽略？
动画播完就回退到初始状态，不是 bug，是默认行为。想让元素“停在最后一帧”，必须显式加 forwards。
-
none（默认）：动画结束后恢复原始样式 -
forwards：保留to或最后一帧的样式（最常用） -
backwards：动画开始前就应用from帧（常用于入场延迟） -
both：backwards+forwards合体，但容易引发意外交互问题，慎用
典型踩坑：按钮 hover 动画加了 scale(1.1)，但没加 animation-fill-mode: forwards，鼠标移开瞬间就缩回去了。
立即学习“前端免费学习笔记（深入）”；
animation-timing-function 怎么选才不假？
它控制“运动节奏”，不是“快慢”——ease 和 linear 看着差不多，但在滚动或交互反馈中感知极强。
-
ease（默认）：先慢后快再慢，适合模拟自然惯性，但连续触发动画时易显拖沓 -
ease-in-out：更平滑的起止，适合模态框淡入淡出 -
cubic-bezier(0.16, 1, 0.3, 1)：推荐用于“快速响应+柔和收尾”的交互，比如按钮点击反馈 - 避免用
step-start/step-end做非分步动画（比如进度条），否则会跳变
动画性能差、掉帧？先关掉这几个属性
不是所有 CSS 属性都适合动画。浏览器对 transform 和 opacity 做了硬件加速优化，其他大多触发重排（layout）或重绘（paint）。
- 绝对别对
width、height、left、top、margin做动画——尤其在列表或高频滚动区域 -
box-shadow和filter（如blur()）动画开销极大，低端设备明显卡顿 - 用
will-change: transform提前声明可提升性能，但别滥用——每个元素都加反而降低性能 - 移动端注意：iOS Safari 对
transform: scaleZ()和perspective支持不稳定，优先用scale3d(1,1,1)替代scale()
真正难的不是写出来，而是判断哪一帧该用 transform、哪一帧该用 opacity、哪一帧其实该交给 JS 控制节奏——这些边界往往藏在真实交互反馈里，而不是文档示例中。
