动画错位主因是循环时未保持结束状态或关键帧首尾不衔接；应使用 animation-fill-mode: forwards 锁定终态，并确保 @keyframes 的 0% 与 100% 关键帧自然连贯，必要时改用 JS 手动控制重播。
动画重复触发时出现错位，通常是因为每次动画重新开始时元素回到了初始状态，而不是从上一次结束的位置继续。关键在于控制动画的“起始点”和“结束保持”，而不是单纯依赖 animation-iteration-count。
用 animation-fill-mode: forwards 锁定最终状态
默认情况下，动画结束后元素会恢复到动画前的样式（即回到 CSS 原始定义的状态），造成视觉“跳回”。加上 forwards 可让元素在动画最后一帧停留，避免错位感。
- 只加
forwards就能解决多数重复错位问题，尤其适用于单次动画后需保持结果、再手动/定时重播的场景 - 注意：它不影响动画过程中的行为，只作用于动画结束后的状态保持
- 示例：
animation: slide 0.6s ease forwards;
慎用 animation-iteration-count: infinite 直接循环
无限循环本身不导致错位，但若动画关键帧（@keyframes）没设计好首尾衔接，就会在循环切换瞬间“闪一下”或位置突变。
- 检查
0%和100%关键帧是否完全一致（对位移动画）或自然连贯（如旋转 0deg → 360deg） - 避免写
0% { transform: translateX(0); } 100% { transform: translateX(100px); }后又无限循环——下一轮会从 0px 突然跳回，造成错位 - 更稳妥的做法：用
transform: translateX(100px)开头 +translateX(200px)结尾，配合forwards和手动重播逻辑
需要精确重复？改用 animation-play-state 手动控制
当自动循环不可靠（比如受 JS 控制、需响应用户操作、或要插入延迟），不如放弃 infinite，改用 JS 触发重播，并结合 forwards 保证衔接。
立即学习“前端免费学习笔记（深入）”；
- CSS 中设为单次：
animation: pulse 0.4s ease forwards; - JS 中监听
animationend，稍作延迟后重设animation属性（或 toggle class） - 这样每一帧都从上一帧结束位置出发，彻底规避循环跳变
额外检查：transform origin 和盒模型是否稳定
错位有时不是动画逻辑问题，而是元素自身发生了意外变化：
- 确认
transform-origin没被其他规则动态修改（比如 hover 改了 origin，再动画就偏了） - 检查动画过程中
width/height/padding是否有变化——这会改变元素几何中心，影响 transform 定位 - 建议给动画元素加
will-change: transform;（仅必要时），减少渲染抖动干扰
