css动画轮流反方向

CSS动画是现代网页设计中非常重要的一部分，通过使用CSS动画可以给网站增加更生动、有趣的效果。本文将介绍如何使用CSS动画来轮流展示反方向的效果。

/* 为了展示反方向动画，我们首先定义两个动画，一个是从左到右，一个是从右到左 */
@keyframes move-left {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(100%);
   }
}
@keyframes move-right {
   from {
      transform: translateX(100%);
   }
   to {
      transform: translateX(0);
   }
}

/* 接着为需要展示动画的元素定义动画属性和延时，灰色方块为例 */
.block {
   width: 100px;
   height: 100px;
   background-color: gray;
   
   /* 定义轮流反方向的动画 */
   animation: move-left 2s ease-in-out alternate 1s infinite,move-right 2s ease-in-out alternate 3s infinite;
}

在上述代码中，我们定义了两个动画，一个是从左到右，一个是从右到左，并为需要展示动画的元素定义了两个动画属性，分别为延时1s的move-left和延时3s的move-right，通过使用alternate属性可以实现轮流反方向的效果。

通过使用CSS动画，不仅可以实现简单的动态效果，还可以轻松地实现更加复杂的动画效果，让网站更加生动有趣。