CSS animation-direction 属性值说明
| 值 | 说明 |
|---|---|
| normal | 它是默认值，动画向前播放。每次运行动画时，它都会重置为开始状态并重新开始。 |
| reverse | 动画将向后播放。每次运行动画时，它都会重置为结束并重新开始。定时功能也会反转。 |
| alternate | 首先动画向前移动，然后向后移动。 |
| alternate-reverse | 首先动画向后移动，然后向前移动。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS animation-direction 属性设置动画的播放方式：向前、向后或者交替循环。
默认值为normal。
每次运行动画时，它都会重置为开始状态并重新开始。
当为任何动画属性指定多个逗号分隔值时，它们将以不同的方式添加到动画名称中定义的动画。
animation-direction 属性是 CSS3 属性之一。
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素，它也适用于：：before和：：after伪元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.animationDirection=“reverse” |
语法
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
动画方向属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: normal;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction 示例</h2>
<p>动画倒着播放。</p>
<div></div>
</body>
</html>
具有“反向”值的动画方向属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: reverse;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction 示例</h2>
<p>动画交替播放</p>
<div></div>
</body>
</html>
具有“alternate”值的动画方向属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction 示例</h2>
<p>动画先向前播放，然后向后播放。</p>
<div></div>
</body>
</html>
具有“alternate-reverse”值的动画方向属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: alternate-reverse;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction 示例</h2>
<p>动画先向后播放，然后向前播放。</p>
<div></div>
</body>
</html>
日期：2020-06-02 22:14:23 来源：oir作者：oir