如何使用 CSS 为直线运动设置动画？

直线的直线运动是指直线从一个点开始，到第二个点，然后回到起点。它是一种往返运动。我们将仅使用 CSS 来实现。

方法：方法是先创建一条直线，然后使用关键帧对其进行动画处理。它将分两步完成。第一个用于前进运动，第二个用于向后运动。下面的代码将遵循相同的方法。

HTML：在 HTML 中，我们创建了一个用于绘制直线的 div 元素。

CSS：

• 通过提供您喜欢的最小高度和宽度来创建一条直线。
• 使用 before 选择器动画这条直线，并为它提供一个线性动画，关键帧标识符命名为animate 。
• 关键帧的动画非常简单。对于前半帧，将宽度设为 100%(向前移动)，然后在接下来的半帧中将其减小到 0%(向后移动)。

完整代码：在本节中，我们将结合 HTML 和 CSS 代码来制作直线动画效果。

输出：