动画方向属性 - CSS

CSS（层叠样式表）中的动画方向属性用于定义 CSS 动画中元素的移动方向。它可以在循环动画的每个周期中改变元素的方向。

语法

animation-direction: normal|reverse|alternate|alternate-reverse;

值

• normal：默认值，每个周期元素都运动到最后一帧。
• reverse：每个周期元素反向运动，最后返回到开始位置。
• alternate：每个周期元素沿着正反两个方向来回运动。
• alternate-reverse：每个周期元素沿着反正两个方向来回运动。

例子

下面是一个小例子，演示如何使用 CSS 动画方向属性：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: move;
  animation-duration: 2s;
  animation-direction: reverse;
  animation-iteration-count: infinite;
}

@keyframes move {
  from { left: 0; }
  to { left: 200px; }
}

以上 CSS 代码将使 div 元素沿着水平方向反向移动，并且将无限循环播放动画。

总结

动画方向属性是 CSS 动画的一个关键属性，它可以为元素定义不同的移动方向和动画效果。开发人员可以将其与其他 CSS 动画属性配合使用，以创建各种令人惊叹的动画效果。