[分享]css3怎么设置来回滚动动画

CSS3提供了丰富的动画效果，其中之一就是设置来回滚动动画。下面是设置来回滚动动画的几步：/ 1. 设置定位 / .element { : relative; left: 0; } / 2. 设置动画...

CSS3提供了丰富的动画效果，其中之一就是设置来回滚动动画。下面是设置来回滚动动画的几步：

/* 1. 设置定位 */
.element {
  position: relative;
  left: 0;
}

/* 2. 设置动画 */
@keyframes roll {
  0% {
    left: 0;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 0;
  }
}

/* 3. 设置动画属性 */
.element {
  animation-name: roll;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
} 

首先，我们需要给元素设置定位，这里我们使用相对定位，将left设为0。

接着，设置一个关键帧动画，命名为“roll”。其中，0%代表动画初始状态，50%代表动画执行到一半的状态，100%代表动画结束状态。我们将元素的left值从0变为50%，再从50%回到0，这就是来回滚动动画实现的关键。

最后，对元素设置动画属性。我们将动画名字设为“roll”，持续时间为2秒，循环次数为无穷，方向为交替进行，也就是说，元素会先从左到右滚动，再从右到左滚动，不断循环这个过程。

在HTML代码中，我们只需要将要进行来回滚动动画的元素的class设置为我们刚才定义的类名“element”即可。