CSS 属性：animation-direction

animation-direction 为动画指定播放方向，有 4 个可能取值：

• normal（默认），正向播放动画；
• reverse，反向播放动画；
• alternate，动画来回播放（从正向开始）；
• alternate-reverse，动画来回播放（从反向开始）。

以下面的动画为例：

@keyframes move-smooth {
	to {
		transform: translateX(50px);
	}
}
复制代码

正向播放动画（默认）

这个动画效果 move-smooth，是让应用元素向右平移 50px。比如：

.move {
	animation: 1s move-smooth;
}

<div class="move">这是一段移动文字</div>
复制代码

div.move 会自动执行动画 move