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

在CSS中，我们可以使用@keyframes规则定义CSS动画中的关键帧，同时使用animation属性来指定动画的名称、持续时间、动画效果等相关参数。通过设置动画的关键帧和属性，我们可以为元素创建各种复杂的动画效果。

对于直线运动，我们可以通过动态改变元素的top和left属性来实现。以下是一个示例代码：

/* 定义元素运动的关键帧 */
@keyframes move {
  0%   { top: 0; left: 0; }
  50%  { top: 100px; left: 200px; }
  100% { top: 200px; left: 400px; }
}

/* 指定元素动画的名称、持续时间、动画方式等参数 */
.element {
  position: absolute;
  animation-name: move;
  animation-duration: 3s;
  animation-timing-function: linear;
}

在上述代码中，我们定义了一个名为move的关键帧，通过改变元素的top和left属性，在动画时间内让元素从起点(0,0)移动到终点(400,200)。同时，我们将move关键帧指定给.element元素的animation-name属性，设置其持续时间为3秒，动画方式为线性运动。

需要注意的是，移动效果会受到元素的position属性的影响。只有绝对定位的元素才可以通过改变top和left属性实现移位效果。如果元素的position属性为其他值，例如relative或static等，需要先将其设置为absolute或fixed等绝对定位方式。

通过以上代码，我们可以为页面中的元素设置直线运动的动画效果，让页面更加生动有趣。