CSS动画direction属性全面解析

前往漫画官网入口并下载

想让你的CSS动画更灵活多变吗？`animation-direction`属性绝对是你的利器！本文将深入详解CSS `animation-direction`属性的用法，它能控制动画的播放方向，让你的动画不再单调。通过`normal`（正向）、`reverse`（反向）、`alternate`（奇数次正向偶数次反向）和`alternate-reverse`（奇数次反向偶数次正向）等常用值，配合`@keyframes`关键帧，轻松实现来回运动、呼吸灯、轮播图切换和图标hover动效等多种效果。告别重复代码，提升动画效率，让你的网页动起来！

animation-direction用于控制CSS动画播放方向，常用值为normal（正向）、reverse（反向）、alternate（奇次正向偶次反向）和alternate-reverse（奇次反向偶次正向），配合keyframes可实现来回运动等效果，如呼吸灯、轮播图切换和图标hover动效，减少重复代码，提升动画灵活性。

在 CSS 中，animation-direction 属性用于控制动画的播放方向。它常与 @keyframes 配合使用，决定动画是从头到尾、从尾到头，还是交替进行。

1. animation-direction 的常用取值

该属性有几个可选值，最常用的是以下四种：

• normal：默认值，动画按 keyframes 中定义的方向播放（0% → 100%）。
• reverse：反向播放，从 100% 到 0% 运行动画。
• alternate：奇数次正向播放，偶数次反向播放（第1次 normal，第2次 reverse，第3次 normal……）。
• alternate-reverse：奇数次反向播放，偶数次正向播放。

2. 正向与反向的实际用法示例

假设我们有一个简单的移动动画：

此时动画会从左向右移动 200px。我们可以改变 animation-direction 来控制方向：

正向播放（normal）

每次动画都从 0px 移动到 200px。

反向播放（reverse）

动画从 200px 移回 0px，即反向运行关键帧。

交替播放（alternate）

第1次：→ 向右移动
第2次：← 向左移回
第3次：→ 再次向右
第4次：← 再次向左

这种模式适合“来回”运动，比如摆动或呼吸效果。

3. 常见应用场景

使用 animation-direction 可以简化一些动画逻辑，避免重复定义 keyframes。

• 制作呼吸灯效果时，用 alternate 实现放大缩小循环。
• 轮播图切换时，反向播放退出动画，使过渡更自然。
• 图标 hover 动效来回变化，无需写两套关键帧。

基本上就这些。合理使用 animation-direction 能减少代码量，让动画更灵活。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS动画direction属性全面解析》文章吧，也可关注golang学习网公众号了解相关技术文章。