JSFiddle - React, Tailwind, and code Playground

by tobek

HTML

<div class="slideshow">
   <div class="images">
       A slideshow of images in here (whatever you want to say for screen readers)
   </div>
</div>

CSS

.slideshow {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.images {
  height: 200px;
  width: 2526px;
  background: url(http://cl.ly/9BJG/collage.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  
  -webkit-animation: moveSlideshow 60s linear infinite;
  -moz-animation:    moveSlideshow 60s linear infinite;
  
  /* Hey browser, use your GPU */
   -webkit-transform: translate3d(0, 0, 0);
}
@-webkit-keyframes moveSlideshow {
    0%   { 
        -webkit-transform: translateX(0);  
    }    
    100% { 
        -webkit-transform: translateX(-200%);  
    }
}
@-moz-keyframes moveSlideshow {
    0%   { 
        -moz-transform:    translateX(0); 
    }    
    100% { 
        -moz-transform:    translateX(-200%); 
    }
}