[分享]css3左右循环移动动画效果

CSS3 左右循环移动动画效果，可以轻松给网页增加动态的效果。以下是如何创建该效果的详细教程：

/* CSS 代码 */
.box {
  position: relative;
  animation: leftRight 2.5s linear infinite;
}
@keyframes leftRight {
  0%, 100% {
    left: 0%;
  }
  50% {
    left: 100%;
  }
} 

首先，创建一个具有相对定位的盒子。接着，通过动画属性添加该盒子的动画效果。在该代码中，我们使用了 animation 属性来指定该盒子的左右轮播动画，设置循环次数为无限。
通过创建一个名为 leftRight 的动画关键帧，我们可以指定另一个关键帧，该关键帧位于循环动画的中间位置（也就是 50% 的位置）。在该关键帧处，我们将盒子向右移动，直到它完全移动到了视窗的边缘。然后在动画的第二部分，我们将其左移回到原始位置。