真正用得上的css动画技巧不到20个；transition适用于属性变化触发的交互动效，animation适用于关键帧控制的复杂运动；流畅动画应仅依赖transform和opacity以避免layout；animation-fill-mode: forwards失效多因终态被覆盖；@property动画需注意浏览器兼容性及降级方案。
没有“100个知识点”这种东西——真正在项目里用得上的CSS动画技巧，不到20个；剩下全是边缘场景或过时写法。
animation 和 transition 该选哪个？
看触发方式：transition 响应属性变化（比如 hover、focus、JS改className），animation 需显式定义关键帧并启动（靠animation-name或JS调用animate()）。
常见错误现象：transition写了但没生效，大概率是起始/结束状态之间没有可过渡的属性（比如从display: none切到block不行，改用opacity和visibility）。
- 交互类动效（按钮悬停、菜单展开）优先用
transition，开销低、易维护 - 复杂路径运动（弹跳、描边动画、多段位移）必须用
@keyframes+animation -
transition不支持transform的分轴控制（比如只过渡scaleY），animation可以
transform 动画卡顿？先关掉 layout 触发器
CSS动画卡顿，90%不是因为“性能差”，而是无意中触发了浏览器 layout（重排）——比如对width、height、top/left做动画。
立即学习“前端免费学习笔记（深入）”；
真正流畅的动画只该走合成层（compositor），只依赖transform和opacity。
- 把
position: relative换成transform: translateZ(0)或will-change: transform（仅必要时加，别滥用） - 避免在动画中读取
offsetWidth等触发同步 layout 的JS操作 - Chrome DevTools > Rendering > “Paint flashing” 可直观看到哪些区域被重绘
animation-fill-mode: forwards 为什么有时失效？
这个值本意是让动画最后一帧保持住，但常被忽略的前提是：元素不能被其他样式覆盖。比如动画结束后，CSS里写了opacity: 0，那forwards就白设了。
另一个坑是animation-direction: alternate和forwards共存时行为反直觉：它保留的是“最后一次播放结束时的状态”，不是“正向播放的最后一帧”。
- 检查是否有更高优先级的样式（如内联
style、后写的CSS规则）覆盖了动画终态 - 调试时临时加
animation-play-state: paused，用DevTools看computed值是否符合预期 - 如果要确保终态，不如在
@keyframes最后一帧里显式写死（比如to { opacity: 1; transform: scale(1); }）
用 CSS @property 做动画前，先确认兼容性
@property能让你对自定义属性（比如--progress）做动画，但目前仅Chrome 105+、Edge 105+、Safari 16.4+支持，Firefox 完全不支持。
这意味着：想用它做进度条、颜色渐变等“数据驱动动画”，就得准备降级方案（比如fallback用JS + transition）。
- 别直接用
transition: --progress 0.3s——没声明@property会静默失败 - 声明时必须指定
syntax（如"<number>"</number>）和inherits，否则无法动画 - 移动端iOS Safari 16.4之前版本不认
@property，哪怕写了也当普通变量处理
真正难的从来不是写出酷炫效果，而是判断某个动画该不该用CSS实现、该用哪条路径、以及上线后用户手机上到底卡不卡——这些没法靠“知识点清单”解决，得看真实设备、真实网络、真实DOM结构。
