改变方向时的动画

动画改变方向时，可以使用CSS的transform属性来实现。具体来说，可以使用translate()、rotate()、skew()、scale()等函数来改变元素的位置、角度、缩放等属性，从而改变动画的方向。

例如，假设要使一个水平方向上的动画在竖直方向上播放，可以使用以下CSS代码：

@keyframes horizontal-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.vertical-animation {
  animation: vertical-animation 1s linear infinite;
}

@keyframes vertical-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

在这个例子中，我们定义了两个动画：horizontal-animation和vertical-animation。horizontal-animation使用translateX()函数来改变元素的位置，从而使动画在水平方向上播放。vertical-animation使用translateY()函数来改变元素的位置，从而使动画在竖直方向上播放。

需要注意的是，当元素的位置改变时，元素的动画也会随之改变。因此，在编写动画时，需要仔细考虑动画的方向和速度，以确保动画的流畅性和可读性。