animation-fill-mode: forwards仅保持渲染层最后一帧，不更新计算样式，导致交互异常；应通过JS在animationend中固化样式或禁用transition避免回弹，末帧需显式声明所有动画属性。
animation-fill-mode设为forwards后元素样式“卡住”但交互失效
动画结束后元素视觉上停在最后一帧，但getComputedStyle读取的值可能仍是初始值，导致点击区域错位、:hover不触发或JS判断位置异常。这是因为forwards只影响渲染层，不改变DOM的实际计算样式。
- 用
animation-fill-mode: forwards时，务必配合animation-play-state: paused或手动在animationend事件中设置最终状态 - 更可靠的做法：在动画结束时用JS把关键样式写死到
style属性，比如el.style.transform = 'translateX(100px)'; - 避免依赖
getBoundingClientRect()或offsetLeft在动画刚结束时立刻读值——加requestAnimationFrame延后一帧再读
transition和animation混用导致结束瞬间回弹
如果元素同时有transition（比如transform 0.3s）和animation，动画结束后浏览器可能按transition规则“补间”回初始值，造成跳变。
- 动画期间临时禁用transition：
el.style.transition = 'none';，动画结束再恢复 - 或者把transition写在动画class里，而非元素默认样式中，避免叠加
- 检查是否误写了
animation-direction: alternate且没配animation-iteration-count: 1，导致第二轮反向播放“抽搐”
@keyframes末帧遗漏关键属性引发重绘跳变
常见错误是只在to或100%里写transform，但没同步写opacity、visibility或z-index，动画一停，这些属性立刻回退到初始值，视觉上就是“闪一下”或“突然消失”。
- 末帧必须显式声明所有参与动画的属性，哪怕值和初始值一样，例如：
opacity: 1; visibility: visible; - 慎用
visibility: hidden做收尾——它会直接移除渲染框，后续显示时可能触发布局重排；优先用opacity: 0+pointer-events: none - 如果用
height: 0收尾，记得同时设overflow: hidden，否则内容可能撑开容器导致跳动
使用will-change后动画结束未重置导致渲染异常
will-change: transform能提升动画性能，但动画结束后若不重置，浏览器可能持续维持优化路径，反而干扰后续样式更新，出现定位偏移或模糊。
立即学习“前端免费学习笔记（深入）”；
- 动画开始前设
will-change: transform，结束时立刻清空：el.style.willChange = 'auto'; - 不要对静态元素长期设
will-change，尤其别写在CSS规则里全局生效 - 如果用
transform: scale()动画，注意will-change只对transform本身有效，不影响scale带来的子元素缩放渲染精度问题
最麻烦的是复合动画：多个@keyframes嵌套、JS控制暂停/恢复、加上媒体查询响应式切换——这时候单靠CSS很难稳住终点，得接受“动画结束=JS接管”的事实，老老实实监听animationend并手动固化样式。浏览器不会替你记住你想停在哪一帧。
