动画剪辑路径 - CSS

CSS动画是创建动态和交互式Web页面的强大工具。路径动画是一种特殊类型的CSS动画，可在指定路径上移动元素。

定义路径动画

要使用路径动画，需要定义路径。路径可以用SVG路径或CSS基础形状（如矩形或圆形）定义。这里以SVG路径为例：

<svg>
  <path id="motionPath" d="M 100 100 C 200 200, 400 200, 500 100" />
  <circle id="myCircle" cx="0" cy="0" r="25" />
</svg>

上述代码中，我们定义了一个包含SVG路径和圆的SVG元素。路径使用M C命令设置贝塞尔曲线，这将在路径上创建平滑的曲线。需要为路径和圆元素分配ID以便以后使用。

实现路径动画

接下来，我们可以在CSS中创建路径动画，并将其应用于元素。我们将使用以下关键帧动画：

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(400px, 0);

    /* Use 'offset-path' to define the motion path */
    offset-path: path("M 100 100 C 200 200, 400 200, 500 100");
  }
}

在上述代码中，我们使用move关键字定义了一个关键帧动画。在动画的最后一帧中，我们使用offset-path属性将元素与上述路径相匹配。offset-path是CSS Motion Paths规范的一部分，用于定义元素的运动路径。

然后，我们使用以下代码将动画应用于圆元素：

#myCircle {
  animation: move 5s infinite;
}

我们将上述代码放入style标签中。

结论

路径动画是CSS中非常有用的功能，可帮助我们创建各种交互式效果。通过定义路径和关键帧动画，我们可以让元素沿着路径移动，呈现出独特的动态效果。

参考资料

1. CSS Motion Paths
2. Using CSS Animations