animation-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

animation-direction CSS 属性设置动画是应正向播放、反向播放还是在正向和反向之间交替播放。

尝试一下

使用 animation 的简写属性通常非常方便,可以一次性设置所有动画属性。

语法

css
/* 单个动画 */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* 多个动画 */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* 全局值 */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;

normal

动画在每个循环中正向播放。换句话说,每次动画循环时,动画将重置为起始状态并重新开始。这是默认值。

reverse

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

alternate

动画在每个循环中正反交替播放,第一次迭代是正向播放。确定循环是奇数还是偶数的计数从 1 开始。

alternate-reverse

动画在每个循环中正反交替播放,第一次迭代是反向播放。确定循环是奇数还是偶数的计数从 1 开始。

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

形式定义

初始值normal
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
计算值as specified
动画类型Not animatable

形式语法

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 动画以获取示例。

规范

Specification
CSS Animations Level 1
# animation-direction

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-direction
alternate
alternate-reverse
normal
reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见