@keyframes动画必须显式定义0%和100%关键帧，仅用from/to存在兼容风险；animation缩写中duration须在delay前且带单位；仅transform和opacity可GPU加速；forwards对infinite动画无效，中断时需用animationend事件固化状态。
用 @keyframes 定义动画时，百分比必须从 0% 开始、100% 结束
浏览器只认这两个关键帧锚点，漏掉任意一个，@keyframes 就算声明了也无效，元素加了 animation 也不会动。
常见错误是只写 from 和 to，但某些旧版 Safari 对 from/to 支持不稳定，尤其嵌套在 CSS-in-JS 或构建工具里时容易静默失效。稳妥起见，直接写 0% 和 100%。
-
0%必须显式定义初始状态，比如transform: translateX(0)，不能依赖元素默认值 - 中间帧（如
50%）可选，但若想控制缓动节奏或中途停顿，就得手动设 - 同一组
@keyframes名称不能重复定义，后声明的会覆盖前声明的——调试时容易误以为动画“变慢”了，其实是被覆盖了
animation 缩写属性里，时间单位顺序不能错
animation: name duration timing-function delay iteration-count direction fill-mode play-state，其中 duration 和 delay 都要带单位（s 或 ms），且 duration 必须在 delay 前面。写反了，比如 animation: slide 2s 1s 是对的，但写成 animation: slide 1s 2s，浏览器会把 1s 当作 duration，2s 当作 delay，结果动画快得看不见。
- 如果只写一个时间值，它只被当作
duration，delay默认为0s -
iteration-count写infinite没问题，但别写成infitnite（拼错）——这种错不会报错，只是动画播一次就停 - 移动端 iOS Safari 对
animation-play-state: paused的响应有延迟，hover 触发暂停时可能多播一两帧
动画卡顿？先关掉 transform 以外的属性变化
改 width、height、top、left 或 background-color 都会触发重排（reflow）或高成本重绘（repaint），尤其在中低端安卓机上掉帧明显。真正能进 GPU 加速的，只有 transform 和 opacity。
立即学习“前端免费学习笔记（深入）”；
- 位移优先用
transform: translateX(100px)，别用left: 100px - 缩放/旋转统一走
transform: scale(1.2) rotate(5deg)，别拆成多个 transform 声明（CSS 会合并，但手写多了易错） -
opacity动画很轻量，但别和visibility混用——visibility: hidden不触发重排，但无法过渡；想淡出+隐藏，得用opacity+pointer-events: none控制交互
动画结束后保持最终状态，animation-fill-mode: forwards 不是万能的
它只保证动画停止那一刻的样式留在元素上，但如果动画被 JS 中断（比如调用 element.style.animation = 'none'），forwards 就失效了，元素会瞬间回退到动画前的状态。
- 更稳的做法：动画结束时，用
animationend事件手动加一个 class，把最终样式写死在那个 class 里 -
forwards对infinite动画无效——无限循环没有“结束”，所以填不了 - 如果同时用了
transition和animation，且目标属性重叠（比如都动opacity），动画会强行覆盖 transition，但 transition 的缓动函数可能干扰动画起始帧的平滑度
animationend 捕获的残留状态，最容易暴露问题。 
