纯CSS3不断移动滑块

要制作不断移动的滑块动画,请不要为每个图像元素指定不同的位置.相反,将它们放在父元素之外的相同位置,然后给它们中的每一个逐渐不同,animation-delay如下面的代码片段所示.给每个图像元素一个不同的起始位置将意味着它们中的每一个都需要被提供不同的持续时间,因为速度必须是不同的(因为它必须从左到右覆盖的像素量将是高的).

由于有在任何时间点,总在容器内9个的图像的是,每个单独的图像元素的延迟应等于(animation-duration/9) * (n-1)其中n是否定的.元素.为简单起见,我将其修改animation-duration为9s,因此对于第一个图像,animation-delay将为0,而对于第二个图像,将为1,依此类推.

#slider {
  width: 850px;
  margin: 0 150px;
}
.ruler {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid black;
}
.u10 {
  flex: 1 1 0;
  width: 10%;
  text-align: center;
  z-index: 0;
}
.u10:nth-child(even) {
  background-color: white;
}
.u10:nth-child(odd) {
  background-color: gray;
}
ul {
  list-style: outside none none;
  position: relative;
  height: 100px;
}
ul:after {
  border: 1px solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
}
li {
  position: absolute;
}
.img1 {
  left: -120px;
}
.img2 {
  left: 0px;
}
.img3 {
  left: 120px;
}
.img4 {
  left: 240px;
}
.img5 {
  left: 360px;
}
.img6 {
  left: 480px;
}
.img7 {
  left: 600px;
}
.img8 {
  left: 720px;
}
.img9 {
  left: 840px;
}
.animation {
  animation: 9s linear 0s infinite running cycle1;
}
@keyframes cycle1 {
  0% {
    left: -120px;
    opacity: 0;
  }
  1% {
    left: -120px;
    opacity: 1;
  }
  99% {
    left: 850px;
    opacity: 1;
  }
  100% {
    left: -120px;
    opacity: 0;
  }
}
.animation[class*='img'] {
  left: -120px;
}
.animation.img2 {
  animation-delay: 1s;
}
.animation.img3 {
  animation-delay: 2s;
}
.animation.img4 {
  animation-delay: 3s;
}
.animation.img5 {
  animation-delay: 4s;
}
.animation.img6 {
  animation-delay: 5s;
}
.animation.img7 {
  animation-delay: 6s;
}
.animation.img8 {
  animation-delay: 7s;
}
.animation.img9 {
  animation-delay: 8s;
}
ul.overflow-hidden {
  overflow: hidden;
}

  

    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
  
  
Without animation
  

    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
  
  
With the portions outside the container visible
  

    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
  
  
With the portions outside the container hidden