CSS animation-direction 属性（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页设计中，CSS 动画为页面增添了生动的交互效果。而 animation-direction 属性作为控制动画播放方向的核心工具，能够灵活调整动画的执行路径，甚至实现“倒放”或“往返循环”等创意效果。对于编程初学者和中级开发者来说，掌握这一属性不仅能提升动画设计的灵活性，还能为复杂交互场景提供解决方案。本文将从基础概念出发，结合实际案例，深入解析 animation-direction 的使用方法与技巧。

一、理解动画方向的基础概念

1.1 动画的“方向”是什么？

在 CSS 动画中，方向指的是动画从起始状态到结束状态的播放路径。默认情况下，动画会按照关键帧定义的顺序从 0%（开始）到 100%（结束）正向播放。而 animation-direction 属性的作用，正是允许开发者控制这一播放路径的“方向”。

形象比喻：
可以将动画方向想象为交通信号灯的指示方向。默认情况下，动画像车辆一样沿着“正向车道”行驶；而通过 animation-direction，可以将其转向“反向车道”或设置为“往返车道”。

1.2 关键帧与动画方向的关系

动画方向的控制依赖于关键帧（@keyframes）的定义。例如，若关键帧定义了从透明到不透明的渐变效果，animation-direction: reverse 将使其从不透明倒退到透明。因此，在使用 animation-direction 时，必须先确保关键帧已正确编写。

二、animation-direction 的属性值详解

animation-direction 共有四个可选值，每个值对应不同的动画行为模式。

2.1 normal（默认值）

• 作用：动画按正向播放，即从 0% 到 100% 的关键帧顺序执行。
• 示例代码：

  @keyframes fade-in {  
    0% { opacity: 0; }  
    100% { opacity: 1; }  
  }  
  .box {  
    animation: fade-in 2s linear normal;  
  }  
  

  该代码定义了一个元素从完全透明到完全不透明的渐现动画，方向为默认的正向播放。

2.2 reverse

• 作用：动画以反向播放，即从 100% 到 0% 的关键帧顺序执行。
• 示例代码：

  .box {  
    animation: fade-in 2s linear reverse;  
  }  
  

  这时元素会从不透明开始逐渐变透明，效果与 normal 完全相反。

2.3 alternate

• 作用：动画在奇数次迭代时正向播放，偶数次迭代时反向播放，形成“往返”效果。
• 示例代码：

  .box {  
    animation: slide 2s linear alternate infinite;  
  }  
  @keyframes slide {  
    0% { transform: translateX(0); }  
    100% { transform: translateX(200px); }  
  }  
  

  此时元素会从左到右移动后，再反向回到起点，循环往复。

2.4 alternate-reverse

• 作用：与 alternate 相反，奇数次迭代时反向播放，偶数次迭代时正向播放。
• 示例代码：

  .box {  
    animation: slide 2s linear alternate-reverse infinite;  
  }  
  

  这时元素会以反向（从右到左）开始动画，随后正向（左到右）循环。

三、表格对比：属性值效果速查

（以下表格与前文保持空行分隔）
| 属性值 | 播放模式 | 适用场景 |
|----------------|----------------------------|-------------------------|
| normal | 单次正向播放 | 基础动画效果 |
| reverse | 单次反向播放 | 需要“逆向”效果时 |
| alternate | 循环时奇偶次方向相反 | 需要往返或波浪形动画 |
| alternate-reverse | 奇次反向，偶次正向 | 需要特殊循环方向控制 |

四、实际案例：如何利用 animation-direction 解决问题

4.1 案例 1：按钮悬停的“回弹”效果

需求：点击按钮时，按钮先缩小再恢复原状，模拟物理弹跳效果。
解决方案：

• 使用 reverse 方向配合关键帧：

  @keyframes shrink {  
    0% { transform: scale(1); }  
    50% { transform: scale(0.9); }  
    100% { transform: scale(1); }  
  }  
  .button {  
    transition: all 0.3s ease-out;  
    /* 点击时触发反向动画 */  
    &:active {  
      animation: shrink 0.2s reverse;  
    }  
  }  
  

  这里通过 reverse 让动画从 50% 的缩略状态开始倒放，实现按下后“反弹”效果。

4.2 案例 2：轮播图的无缝循环

需求：轮播图需要左右来回滑动，且过渡自然。
解决方案：

• 使用 alternate 方向配合 infinite 循环：

  @keyframes carousel {  
    0% { transform: translateX(0); }  
    100% { transform: translateX(-100%); }  
  }  
  .carousel-container {  
    animation: carousel 8s linear alternate infinite;  
  }  
  

  这时轮播图会向左滑动后自动返回起点，形成无缝循环。

五、进阶技巧：与动画其他属性的协同

5.1 结合 animation-iteration-count 控制循环次数

通过设置 animation-iteration-count，可以精确控制动画的总循环次数。例如：

/* 播放 3 次后停止 */  
.animation {  
  animation: bounce 1s ease-out 3;  
  animation-direction: alternate;  
}  

此时动画会正向-反向-正向播放三次后停止。

5.2 与 animation-timing-function 的配合

animation-timing-function 可以调整动画的速度曲线，与 animation-direction 结合能产生更复杂的效果。例如：

@keyframes spin {  
  0% { transform: rotate(0deg); }  
  100% { transform: rotate(360deg); }  
}  
.spinner {  
  animation: spin 2s ease-in-out alternate infinite;  
  animation-direction: alternate-reverse;  
}  

此代码让旋转动画以“先减速后加速”的节奏，反向开始并往返循环。

六、常见问题与解决方案

6.1 为什么动画方向没有生效？

可能原因：

• 关键帧未正确编写，导致动画路径不可逆。例如，若关键帧仅定义了 0% 和 100% 的透明度变化，则反向播放效果明显；但若关键帧中包含不可逆的属性（如 transform: skew），反向播放可能不自然。
• 未指定 animation-iteration-count 或 infinite，导致动画仅执行一次后停止。

解决方案：

• 检查关键帧是否包含可逆的属性（如位置、缩放、透明度）。
• 明确设置循环次数或使用 infinite。

6.2 如何实现“先正向再反向”的单次动画？

可以使用 animation-direction: reverse 结合 animation-delay：

.animation {  
  animation:  
    /* 正向播放 2 秒后，延迟 0 秒开始反向播放 */  
    normal-play 2s forwards,  
    reverse-play 2s reverse 2s forwards;  
}  
@keyframes normal-play {  
  100% { transform: translateX(200px); }  
}  
@keyframes reverse-play {  
  100% { transform: translateX(200px); }  
}  

此代码让元素先向右移动，2 秒后反向回到起点。

结论

CSS animation-direction 属性 是控制动画播放方向的“方向舵”，通过灵活设置其四个值（normal、reverse、alternate、alternate-reverse），开发者可以轻松实现正向、反向、往返等多样化效果。无论是基础的按钮交互，还是复杂的轮播图动画，这一属性都能显著提升设计的灵活性与创意空间。建议读者通过实际案例反复练习，结合 animation-duration、animation-timing-function 等属性，探索更多可能性。掌握 CSS animation-direction 属性，你的网页动画将更具表现力与交互性！