A CodePen by Rachel Nabors. Cat walk + sit w/ animation delay - So walk-cycles are pretty easy. Use steps() in your CSS3 and impress your friends. So what about doing something with the end of that loop? Here I use animation-delay to play a second, sittin

index.html

<div id="tuna"></div>

style.css

#tuna {
  background: url(http://www.rachelnabors.com/animation/toys/img/tuna_sprite.png?2) 0 0 no-repeat; 
  height: 200px;
  width: 400px;
  margin-left: -300px;
  margin-top: -185px;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: margin-left 4s linear;
  /* "Steps" cause the animation to jump between a set number of steps placed equally along the duration. For example, steps(10) would make the animation jump along in ten equal steps. http://dev.opera.com/articles/view/css3-animations/ */
  animation: 
    walk-cycle 1s steps(11, end) 4, 
    sit-down .5s steps(5, end) 4s 1;
  animation-fill-mode: forwards;
}

/* Above I'm using duration to kick off a second animation after the first starts. See this key:

animation: name duration timing-function delay iteration-count direction fill-mode; */

@keyframes walk-cycle {  
  0% { background-position: 0 0; } 
  100% {background-position: 0 100%; } 
}

@keyframes sit-down {  
  0% { background-position: -400px 0; } 
  100% {background-position: -400px -1000px; } 
}