css3动画左右循环

CSS3动画是网页设计中的必备技术，可以为网页增加更加生动的视觉效果。其中左右循环动画是一种经典的效果，接下来我们将介绍如何实现这种动画。

.Box {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #eee;
}
.Box:before,.Box:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #5bc8ac;
  animation: moveLeftRight 2s infinite;
}

.Box:before {
  left: 0;
}

.Box:after {
  right: 0;
  animation-delay: 1s;
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0);
  }
}

上述代码实现了两个在相对位置的伪元素，设置了它们的宽度为50%，高度为整个父元素的高度。然后，使用animation属性为其添加动画，并设置infinite属性为无限循环。

在关键帧（@keyframes）中，设置了三个逐帧变化的状态：0%时，表示初始状态，transform的值为translateX(0)，即初始位置；50%时，translateX的值为150%，让伪元素从左侧滑动到右侧；100%时，重新设置transform为translateX(0)，使伪元素回到初始位置。

通过这样设置，我们就可以将两个伪元素在父元素中往返移动，并形成左右循环的效果。