CSS动画方向反转技巧

CSS的animation-direction属性并非简单的“一键反转”，而是精细控制动画每轮播放方向的逻辑开关——normal、reverse、alternate和alternate-reverse各司其职，决定动画是单向推进、全程倒放、奇偶轮交替正反，还是首轮即倒播；但常被忽视的是：设为reverse却无视觉变化，往往因关键帧语义未适配倒播逻辑（如0%仍写起始态，浏览器只是逆序读取），而非属性失效；它与JS的reverse()方法有本质区别——前者声明式、面向循环逻辑，后者响应式、实时翻转当前进度；搭配transform/opacity可保障性能，而多动画共存时需逐个设置方向，兼容性方面则需避开IE全系。掌握这些，才能让CSS动画真正“收放自如”。

animation-direction 的取值和实际效果

这个属性决定动画在每次循环中是正向播放、反向播放，还是来回交替。关键不是“反转一次”，而是控制每一遍的走向逻辑。

• normal：从 @keyframes 定义的 0% 到 100%，每轮都一样
• reverse：每轮都从 100% 倒着播到 0%，但关键帧定义本身不变（即你写的 0% 仍是起始状态，只是被倒着用）
• alternate：第 1 轮 normal，第 2 轮 reverse，第 3 轮 normal……奇数轮正向，偶数轮反向
• alternate-reverse：第 1 轮 reverse，第 2 轮 normal，第 3 轮 reverse……奇数轮反向，偶数轮正向

为什么设了 reverse 看不出变化？

常见错觉：写了 animation-direction: reverse，但动画看起来没“反转”。本质原因是——你没改 @keyframes 里的关键帧语义，而浏览器只是把播放顺序倒过来读而已。

比如你定义：

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

加 reverse 后，它会先应用 100% 的状态（translateX(100px)），再过渡到 0%（translateX(0)），视觉上就是从右往左滑。但如果关键帧写反了（比如 0% 是 100px、100% 是 0px），再加 reverse 就又绕回来了。

和 animation-play-state 或 JS 控制暂停/重播的区别

animation-direction 不影响播放状态，只影响方向逻辑；它和 animation-play-state: paused 或 JS 中调用 el.getAnimations()[0].reverse() 是不同层面的事。

• 用 CSS 属性控制方向，适合声明式、循环稳定的场景（比如呼吸灯、无限滚动条）
• 用 JS 的 reverse() 方法，是实时翻转当前动画的播放方向（包括已进行的时间点），适合交互触发的即时反转（如 hover 进入时倒播回原位）
• animation-direction 对单次动画（animation-iteration-count: 1）设 reverse，只会播一遍倒序，不会“来回”——那得靠 alternate

兼容性和性能注意点

所有现代浏览器都支持 animation-direction，包括 Safari 9+ 和 Chrome 43+，但 IE 完全不支持（IE10/11 只支持旧版 -webkit- 前缀，且行为不稳定，建议回避）。

性能上它本身不触发重排，但若关键帧里含 top/left 等触发 layout 的属性，倒播时仍会同样消耗。更稳妥的做法是始终用 transform 和 opacity，无论方向怎么变。

容易被忽略的是：当多个动画叠加在同一个元素上，每个动画的 animation-direction 都要单独设置，它不继承也不全局生效。

本篇关于《CSS动画方向反转技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！