在css中animation-direction正向反向使用

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。

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

反向播放（reverse）

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

交替播放（alternate）

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

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

3. 常见应用场景

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

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

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

以上就是在css中animation-direction正向反向使用的详细内容，更多请关注php中文网其它相关文章！