/*
  This displays a "gif" animation by using a spritesheet. It plays an animation
  that scrolls the image through the element, using the "steps" timing function
  where the number of steps equals the number of frames in your sheet.

  The animation keyframes only need to consist of an endpoint where the
  background position is set to -[your image width].
  
  The spritesheet can be made by simply arranging all of your frames in a row.

  This approach lets you do things gifs don't (full palette! semitransparency!),
  and will often be about the same in terms of filesize, with much more fine-
  grained control over playback.
  
  This process results in a constant framerate, so if you need to linger on a
  frame, you must duplicate that frame. This could potentially increase the
  filesize of your animation, but gifs are so space-inefficient that you're
  unlikely to notice the difference much unless your gif needs a high framerate
  and has long pauses, in which case you may need to play around with the css
  keyframes if you want to save space, but that's much more complicated.
*/

#eagle-eye {
  background-image: url("./eagle_eye_spritesheet.png");
  width: 66px;
  height: 60px;
  animation: eagle-eye_anim 880ms steps(22) 1;
  /* to loop, change "1" on the above line to "infinite" */
}

.paused {
  animation-play-state: paused !important;
  /* !important is needed here because animation definition on element might take precedence over this rule otherwise */
}

@keyframes eagle-eye_anim {
  100% {
    background-position: -1452px;
  }
}