CSS 属性animation-direction 决定动画遵循的方向:向前、向后或在这两个方向之间交替，创建前后运动。
使用简写属性 animation是一次配置所有动画属性的常见且简单的方法。
属性值
normal : 动画在每个循环中向前推进。当动画完成一个循环后，它实际上会重置到初始状态并再次开始。此行为是默认设置。
reverse: 在每个循环期间，动画向后运行。这意味着一旦完成一个循环，动画就会重置为最终状态并再次开始。
动画的步骤向后运行，包括缓动函数的反转。
alternate: 动画的每个循环交替改变方向，从第一次迭代开始，向前移动。区分偶数和奇数周期的计数从 1 开始。
alternate-reverse: 在动画的每个周期中，方向都会发生变化，从向后移动的第一次迭代开始。区分偶数和奇数周期的计数从 1 开始。
注意:当animation-* 属性上有多个逗号分隔值时指定后，这些值将按照动画名称出现的顺序应用于动画。
注意:定义 CSS 滚动驱动动画时，animation-iteration-count 的值决定了动画在时间轴进度过程中重复的次数。如果没有为animation-iteration-count指定值，则动画仅执行一次。 infinte 是一个有效值，但在 CSS 滚动驱动动画的情况下可能会导致动画无法工作。
语法
animation-direction = <single-animation-direction>#
<single-animation-direction> = normal | reverse | alternate | alternate-reverse 适用范围
所有 HTML 元素，::before 和 ::after 伪元素。
CSS animation-direction: normal值
以下示例演示了值为normal的动画方向。
CSS 动画方向属性决定动画如何通过其关键帧运行。
在此示例中，使用值法线。
法线使动画向前运行。
<html>
<head>
<style>
/* 内容垂直和水平居中 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
/* Styling the container for the boxes */
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
/* 使用“normal”动画设置盒子的样式 */
.normal-box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #3498db;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: moveNormal;
animation-direction: normal; /* 动画从开始到结束连续移动 */
}
/* 'moveNormal' 动画的关键帧 */
@keyframes moveNormal {
from {
transform: translateX(0);
}
to {
transform: translateX(200px); /* 将盒子水平向右移动 */
}
}
</style>
</head>
<body>
<div class="container">
<div class="normal-box"></div> <!-- Box with 'normal' animation -->
</div>
</body>
</html> CSS animation-direction: alternate值
以下示例演示了animation-direction，其值为 alternate值。
CSS 动画方向属性决定动画的方式运行其关键帧。
在此示例中，使用了值alternate。
alternate 导致动画运行
<html>
<head>
<style>
/* 内容垂直和水平居中 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
/* 为盒子设计容器的样式 */
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
/* Styling for the box with 'alternate' animation */
.alternate-box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #e74c3c;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: moveAlternate;
animation-direction: alternate; /* Animation oscillates back and forth */
}
/* Keyframes for the 'moveAlternate' animation */
@keyframes moveAlternate {
from {
transform: translateX(0);
}
to {
transform: translateX(200px); /* Moves the box back and forth horizontally */
}
}
</style>
</head>
<body>
<div class="container">
<div class="alternate-box"></div> <!-- Box with 'alternate' animation -->
</div>
</body>
</html> CSS animation-direction: reverse值
以下示例演示值为reverse的动画方向。
CSS 动画方向属性决定动画如何在其关键帧中运行。
在此示例中，值反转
相反会导致动画在每个周期向后运行。
<html>
<head>
<style>
/* Centering the content vertically and horizontally */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
/* 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 {
width: 100px;
height: 100px;
margin: 20px;
background-color: #e74c3c;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: moveReverse;
animation-direction: reverse; /* Animation oscillates backwards */
}
/* Keyframes for the 'moveReverse' animation */
@keyframes moveReverse {
from {
transform: translateX(0);
}
to {
transform: translateX(200px); /* Moves the box back and forth horizontally */
}
}
</style>
</head>
<body>
<div class="container">
<div class="reverse-box"></div> <!-- Box with 'reverse' animation -->
</div>
</body>
</html> CSS animation-direction: alternate-reverse
下面的示例演示了值为alternate-reverse的animation-direction。
CSSanimation-direction属性决定如何动画通过其关键帧运行。
在此示例中，使用值alternate-reverse。
相反的原因每个周期反转其方向的动画。
<html>
<head>
<style>
/* Centering the content vertically and horizontally */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
/* Styling the container for the boxes */
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
/* Styling for the box with 'alternate-reverse' animation */
.alt-reverse-box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #e74c3c;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: moveAltReverse;
animation-direction: alternate-reverse; /* Animation oscillates backwards and then changes the direction */
}
/* Keyframes for the 'moveAltReverse' animation */
@keyframes moveAltReverse {
from {
transform: translateX(0);
}
to {
transform: translateX(200px); /* Moves the box back and forth horizontally */
}
}
</style>
</head>
<body>
<div class="container">
<div class="alt-reverse-box"></div> <!-- Box with 'alternate-reverse' animation -->
</div>
</body>
</html>