.animation-title {
  font-family: sans-serif;
  text-align: center;
}

.eye-animation {
  // we move the HTML element inside its wrapper so we set the element's width accordingly
  width: 1800%;
  height: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/blinking-eye-sprite.svg');
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  
  // 'animation-timing-function' ensures users won’t see half of one frame and half of the following frame both at the same time
  // we set the number of steps to 17 because we have 18 frames 
  animation-name: eye-fill;
  animation-duration: 1.3s;
  animation-timing-function: steps(17);
  animation-iteration-count: infinite;
  
  // we position the sprite so that left frame is visible
  position: absolute;
  left: 0;
  top: 0;
  
  // this is the wrapper around the HTML element being moved
  &__wrapper {
    // place it in the middle of the screen
    margin: auto;
    
    // show only one frame at a time, hide unnecesary parts of the moving HTML element
    overflow: hidden;
    // allow inner HTML element to be absolutely positioned
    position: relative;
    
    width: 300px;
    height: 300px;
  }
}

// move element from left to right
@keyframes eye-fill {
  from { 
    transform: translateX(0); 
  }
  to { 
    transform: translateX(-94.44444444%); 
  }
}

// fallback for IE
.ie {
  .eye-animation {
    // tell the browser to move the element into a separate compositing layer to improve performance
    transform: translate3d(0, 0, 0);
    
    animation-name: eye-fill-ie;
  }
}

// move element from left to right
@keyframes eye-fill-ie {
  from {
    left: 0;
  }
  to {
    left: -1700%;
  }
}