CSS 实现环形平移动画 | animation-direction 大显神通

2024-01-02 23:50:26

导言

对于热衷于 Web 设计的人来说，CSS 无疑是锦上添花之物。它赋予了我们无限的创意空间，让我们能够打造出令人惊叹的视觉效果。今天，我们将深入探讨 CSS 中鲜为人知的宝藏——animation-direction 属性，它将带您踏上一段环形平移动画的奇妙之旅。

`animation-direction` 属性

animation-direction 属性控制动画在指定路径上的运动方向。它接受两个值：

normal：动画沿路径正常运动（从起点到终点）。
reverse：动画沿路径反向运动（从终点到起点）。

通过巧妙地使用 animation-direction，我们可以创建出令人着迷的环形平移动画。

案例：环形平移动画

让我们创建一个环形平移动画来展示 animation-direction 的强大功能。为此，我们需要以下 HTML 和 CSS 代码：

<div id="circle"></div>

#circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  animation: move 2s infinite linear;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
    animation-direction: normal;
  }
  50% {
    transform: rotate(180deg);
    animation-direction: reverse;
  }
  100% {
    transform: rotate(360deg);
    animation-direction: normal;
  }
}