JSFiddle - React, Tailwind, and code Playground

by Alexandre Colombo

HTML

<div class="monster"></div>

CSS

.monster {
  width: 190px;
  height: 240px;
  margin: 2% auto;
  background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
  
      transition:	background .8s steps(5) ;
    -webkit-transition:	background .8s steps(5) ;
    -ms-transition:	background .8s steps(5) ;
    -o-transition:	background .8s steps(5) ;
    -moz-transition:	background .8s steps(5) ;
			
    background-position: 0em; 

 
} 

.monster:hover {
       -webkit-animation: play .8s steps(5) 1;
       -moz-animation: play .8s steps(5) 1;
        -ms-animation: play .8s steps(5) 1;
         -o-animation: play .8s steps(5) 1;
            animation: play .8s steps(5) 1;
			
		

			background-position:-950px;
	
}


@-webkit-keyframes play {
   0% { background-position:    0px 0; }
     100% { background-position: -950px 0; }
}

@-moz-keyframes play {
   0% { background-position:    0px 0; }
     100%  { background-position: -950px 0; }
}

@-ms-keyframes play {
   0%{ background-position:    0px 0; }
    100%  { background-position: -950px 0; }
}

@-o-keyframes play {
   0% { background-position:    0px 0; }
     100%  { background-position: -950px 0; }
}

@keyframes play {
  0% { background-position:    0px 0; }
     100%  { background-position: -950px 0; }
}