CSS animation-direction 属性指定了动画应遵循的方向：向前、向后或在这两个方向之间交替，创建来回移动。
使用速记属性动画是一次配置所有动画属性的一种常见且简单的方法。
语法
| 值 | 描述 |
|---|---|
| normal | 这是默认设置，使用此值时，动画将向前推进。 |
| reverse | 此值使动画向后方向前进。 |
| alternate | 此值使动画首先向前推进，然后向后方向前进 |
| alternate-reverse | 此值使动画首先向后方向前进，然后向向前前进。 |
CSS animation-direction 属性示例
下面列出的示例将说明具有不同值的动画方向属性。
向前移动动画
以下示例演示了 animation-direction，其值照常存在。
在这种情况下，动画通常沿正向移动播放。盒子开始向右移动。
例
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling the container for the boxes */
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
/* Styling for the box with 'normal' animation */
.normal-box {
padding: 10%;
background-color: #3498db;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: moveNormal;
/* Animation moves continuously
from start to end */
animation-direction: normal;
}
/* Keyframes for the 'moveNormal' animation */
@keyframes moveNormal {
from {
transform: translateX(0);
}
to {
/* Moves the box horizontally
to the right */
transform: translateX(200px);
}
}
</style>
</head>
<body>
<h2>CSS Animation direction property </h2>
<div class="container">
<div class="normal-box"></div>
</div>
</body>
</html>
向后移动动画
以下示例演示了 animation-direction，值为 reverse。
在这种情况下，动画向后移动。这里考虑的盒子向后移动。
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling the container for the boxes */
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
/* Styling for the box with 'reverse' animation */
.reverse-box {
padding: 10%;
background-color: #e74c3c;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: moveReverse;
/* Animation oscillates backwards */
animation-direction: reverse;
}
/* Keyframes for the 'moveReverse' animation */
@keyframes moveReverse {
from {
transform: translateX(0);
}
to {
/* Moves the box back
and forth horizontally */
transform: translateX(200px);
}
}
</style>
</head>
<body>
<h2>CSS Animation Direction Property</h2>
<div class="container">
<div class="reverse-box"></div>
</div>
</body>
</html>
前后运动动画
以下示例演示了 animation-direction，并将值作为备用值。
在这种情况下，动画首先向前移动，然后向后移动。这里考虑的盒子在前半个周期中向前移动，然后在后半个周期中向后移动。
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling the container for the boxes */
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
/* Styling for the box with
'alternate' animation */
.alternate-box {
padding: 10%;
background-color: #e74c3c;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: moveAlternate;
/* Animation oscillates back and forth */
animation-direction: alternate;
}
/* Keyframes for the 'moveAlternate' animation */
@keyframes moveAlternate {
from {
transform: translateX(0);
}
to {
/* Moves the box back
and forth horizontally */
transform: translateX(200px);
}
}
</style>
</head>
<body>
<h2>CSS Animation Direction Property</h2>
<div class="container">
<div class="alternate-box"></div>
</div>
</body>
</html>
来回运动动画
以下示例演示了 animation-direction，其值为 alternate-reverse。
在这种情况下，动画首先向后移动，然后开始向前移动。这里考虑的盒子首先向后移动，然后向前移动。
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling the container for the boxes */
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
/* Styling for the box with 'alternate' animation */
.alternate-box {
padding: 10%;
background-color: #e74c3c;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: moveAlternate;
/* Animation oscillates back and forth */
animation-direction: alternate;
}
/* Keyframes for the 'moveAlternate' animation */
@keyframes moveAlternate {
from {
transform: translateX(0);
}
to {
/* Moves the box back and
forth horizontally */
transform: translateX(200px);
}
}
</style>
</head>
<body>
<h2>CSS Animation Direction Property</h2>
<div class="container">
<div class="alternate-box"></div>
</div>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
