body {
  padding: 4em 0;
  text-align: center;
  background: #f1f1f1;
}

$width: 200px;
$height: 200px;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: $width;
  height: $height;
  display: inline-block;
  position: relative;
}

li {
  position: absolute;
  top: 0;
  left: 0;
  animation: coverflow 4s ease both infinite;
  
  @for $i from 2 through 4 {
    &:nth-child(#{$i}) {
      animation-delay: ($i - 1) * 1s;
    }
  }
}

img {
  border-radius: 50%;
  border: 2px solid white;
}

@keyframes coverflow {
  0%, 10% {
    opacity: 1;
    transform: none;
    z-index: 10;
  }
  25%, 35% {
    opacity: 0.2;
    transform: translate3d(-170px, 0, 0) scale(0.6);
  }
  50% {
    opacity: 0;
    transform: translate3d(-190px, 0, 0) scale(0.6);
  }
  60% {
    opacity: 0;
    transform: translate3d(190px, 0, 0) scale(0.6);
  }
  75%, 85% {
    opacity: 0.2;
    transform: translate3d(170px, 0, 0) scale(0.6);
  }
}