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-*
属性值不匹配的情况,请参见设置多个动画属性值。
形式定义
形式语法
示例
反转动画方向
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 |
浏览器兼容性
BCD tables only load in the browser