在css中animation-direction正向反向使用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-03

浏览次数：次

返回列表

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

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

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

1. animation-direction 的常用取值

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

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

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

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

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

.animated-box {
  width: 50px;
  height: 50px;
  background: blue;
  animation-name: slide;
  animation-duration: 2s;
}

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

正向播放（normal）

animation-direction: normal;

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

反向播放（reverse）

CPWEB企业网站管理系统2.2 Beta

CPWEB企业网站管理系统（以下称CPWEB）是一个基于PHP+Mysql架构的企业网站管理系统。CPWEB 采用模块化方式开发，功能强大灵活易于扩展，并且完全开放源代码，面向大中型站点提供重量级企业网站建设解决方案。CPWEB企业网站管理系统 2.2 Beta 测试版本，仅供测试，不建议使用在正式项目中，否则发生任何的后果自负。