能不能能无限循环滚动的关键是确定宽图片的位置

只是想练练手，瞧瞧能不能实现在页面上放置一个能无限循环滚动的图片条幅。事实证明，这并不是很难。

先看实际疗效：

无限循环滚动的关键是确定宽图片的位置

首先，这个图片的设计须要有一点方法滚动图片的代码，就是它的首位部份是相同重复的，里面的演示里使用的图片是下边这幅：

滚动的过程是变换图片的left位置，直至图片完整的展示一个循环(事实上是联通到看上去是一个循环)，之后立即将left值调整到最初的位置，开始下一次循环。

我们只须要在外边给图片包个东西，堵住图片多出的内容滚动图片的代码，上面的容器元素来执行动漫疗效。

   

      把图片放到这里面。
   

.slideshow {
  position: relative;
  overflow: hidden;

}
.images {
  background: url(slideshow.jpg);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  animation: slideshow 10s linear infinite;
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}

性能优化

里面的代码已然能挺好的工作了，但假如你的机器配置不高，或浏览器不够先进，可能出现一些性能问题。事实上，我们可以通过使用translateX来取代left达到迸发让浏览器使用3D变换动用GPU来提供性能。

注意：2D变换和opacity值变化并不会带来这些性能变化，假若不使用translateX，就不能从GPU上获得任何益处。

.images {
  ...
   
  /* hi 浏览器，使用你的GPU */
  transform: translate3d(0, 0, 0);
}
@keyframes moveSlideshow {  
  100% { 
    -webkit-transform: translateX(-200%);  
  }
}

我并不是非常喜欢用这样的小把戏来让浏览器提高性能，但作为CSS开发者，这些方法很常见。

降低更炫酷的疗效

不仅让图片无限循环滚动展示外，我们还要降低一些特效：

滚动速率变化从黑褐色弄成彩色

对于速率的调整，我们只须要更改duration值：

.slideshow:hover .images {
  animation-duration: 5s;
} 

但这样会导致图片位置的跳动！更改动漫的duration会形成一个新的timeline，一些属性的值会相应的调整，结果是，它并不是在当前位置开始加速减速。这个问题目前还没有想到哪些好方式。

这儿我们使用了另外一种方式。我们制做了两行图片，一个运动快，一个运动慢，一个显示，一个隐藏，当须要速率变化时，互换它们的显示属性。

这样就形成了一个相对平滑的切换过程。

   

     把你的图片放到这里。
   

   

   

.slideshow > div {
   ...
   transition: opacity 0.5s ease-out; 
    
   /* 慢 */
   animation: moveSlideshow 60s linear infinite;
    
   ...
}
.images-1 {

  /* 快 */
  animation: moveSlideshow 20s linear infinite;
}
.slideshow:hover .images-2 {
   opacity: 0;
}

为了节约带宽，我们将黑白图片和彩色图片合成到了一起。

.images-1 {
  /* Sprite */
  background-position: 0 200px;
  ...
}

这就是最终的成品！