<!-- animation container -->
<h2 class="animation-title">Frame by Frame Animation: #3 Position (CSS-Only Animation)</h2>
<div class="eye-animation"></div>

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

.eye-animation {  
  // place in the middle of the screen
  margin: auto;
  
  width: 300px;
  height: 300px;
  
  // we set the horizontal size to 1800% because we have 18 frames
  // and we position the sprite so that left frame is visible
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/blinking-eye-sprite.svg');
  background-size: 1800%, 100%;
  background-position: left;
  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;
}

// during the animation we move the background-image from left to right
@keyframes eye-fill {
  from {
    background-position: left;
  }
  to { 
    background-position: right;
  }
}