animation-direction

animation-direction CSS 属性设置动画是向前播放、向后播放还是在向前播放和向后播放的序列之间交替播放。

试一试

通常情况下，使用简写属性 animation 一次设置所有动画属性会很方便。

语法

css
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;

值

normal

动画在每个循环中向前播放。换句话说，每次动画循环时，动画都会重置到初始状态并重新开始。这是默认值。

reverse

动画在每个循环中向后播放。换句话说，每次动画循环时，动画都会重置到结束状态并重新开始。动画步骤向后执行，缓动函数也会反转。例如，ease-in 缓动函数变为 ease-out。

alternate

动画在每个循环中反转方向，第一次迭代向前播放。确定循环是偶数还是奇数的计数从一开始。

alternate-reverse

动画在每个循环中反转方向，第一次迭代向后播放。确定循环是偶数还是奇数的计数从一开始。

注意：当您在 animation-* 属性上指定多个用逗号分隔的值时，它们会按照 animation-name 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况，请参阅 设置多个动画属性值。

注意：在创建 CSS 滚动驱动的动画 时，指定 animation-direction 的效果与预期一致，例如 reverse 会导致动画在时间轴前进的过程中反向运行。alternate（与 animation-iteration-count 结合使用）的值会导致动画在时间轴前进的过程中向前和向后运行。

正式定义

初始值normal
应用于所有元素、::before 和 ::after 伪元素
继承否
计算值按指定
动画类型不可动画

正式语法

animation-direction = 
  <single-animation-direction>#  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse

示例

反转动画方向

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

结果

有关示例，请参阅 CSS 动画。

规范

规范
CSS 动画级别 1
# animation-direction

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅