endless image rotator (css)

pure css

by Евгений

HTML

<div class="wrap">
    <div class="inner">
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--2"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--2"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--2"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--2"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--2"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--2"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--2"></div>
      <div class="avatar avatar--1"></div>
      <div class="avatar avatar--1"></div>
    </div>
</div>

CSS

.avatar {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  background-image: url('https://d8996vq0eow3r.cloudfront.net/items/7c6ea312/355e/400f/8916/11373e6cc925/160.160.png')
}
.avatar--1 {
  background-image: url('https://d8996vq0eow3r.cloudfront.net/items/7c6ea312/355e/400f/8916/11373e6cc925/160.160.png')
}
.avatar--2 {
  background-image: url('https://d8996vq0eow3r.cloudfront.net/items/41475ee1/ca14/46e9/8afb/4d068e069ef7/160.160.png')
}
.wrap {
    height: 30px;
    position: relative;
    overflow: hidden;
    width: 210px;
}
.inner {
    height: 200px;
    width: 600px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    
    -moz-transition:  opacity 0.5s ease-out; 
       -o-transition: opacity 0.5s ease-out; 
  -webkit-transition: opacity 0.5s ease-out; 
      -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: moveSlideshow 20s linear infinite;
    -moz-animation:    moveSlideshow 20s linear infinite;
    
}

@-webkit-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -390px; }
}
@-moz-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -390px; }
}