CSS | 动画方向属性

在CSS中，动画方向属性用于指定CSS动画的轨迹方向。使用这些属性可以将动画效果从一侧移动到另一侧、从上到下或者绕着元素中心旋转等等。下面介绍几种常见的动画方向属性。

animation-direction

animation-direction属性用于指定动画播放的方向，可以为以下4个值：

• normal：动画沿着正常方向播放；
• reverse：动画反向播放；
• alternate：动画在轨迹的开始和结束点之间来回反弹；
• alternate-reverse：同上，但是是先反向再正向播放。

例如：

/* 向左移动动画 */
.box {
  animation: move-left 2s linear infinite;
  animation-direction: reverse;
}

@keyframes move-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100px);
  }
}

animation-fill-mode

animation-fill-mode属性用于指定动画执行前、执行后的元素状态，可以为以下4个值：

• none：动画执行完后，将停留在动画结束时的状态。此为默认值；
• forwards：动画执行完后，将停留在动画结束时的状态。（要求动画必须至少运行一次）；
• backwards：动画执行前，将设置元素为第一个关键帧动画（0%）的状态；
• both：向前和向后模式都执行。

例如：

/* 添加效果前缀 */
.box {
  animation-name: example;
  animation-fill-mode: backwards;
  -webkit-animation-name: example;
  -webkit-animation-fill-mode: backwards;
}

@keyframes example {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

animation-play-state

animation-play-state属性用于控制动画的播放状态，可以为以下2个值：

• running：动画正在播放，默认值；
• paused：动画被暂停。

例如：

.box:hover {
  animation-play-state: paused;
}

transform-origin

transform-origin属性用于指定CSS转换的中心点。当元素旋转、缩放、倾斜等效果时，我们可以使用这个属性来改变动画的位置。

例如：

.box{
  transform-origin: top left;
  transform: rotate(45deg);
}

以上就是关于CSS动画方向属性的介绍。这些属性非常有用，并且可以让我们更好地控制动画的效果。