JSFiddle - React, Tailwind, and code Playground
HTML
<h2>La fonction <code>steps()</code></h2>
<div id="vdo-7a"></div>
CSS
body{
padding: 70px;
font: 1em sans-serif;
}
h2{
font-size: 1.6em;
}
#vdo-7a{
width:120px;
height:120px;
margin: auto;
background: url('http://dev.iamvdo.me/marioRun.jpg');
-webkit-animation: sprite 1s steps(20) infinite;
-moz-animation: sprite 1s steps(20) infinite;
-o-animation: sprite 1s steps(20) infinite;
animation: sprite 1s steps(20) infinite;
}
@-webkit-keyframes sprite{
from { background-position:0 0;}
to { background-position:-2400px 0px;}
}
@-moz-keyframes sprite{
from { background-position:0 0;}
to { background-position:-2400px 0px;}
}
@-o-keyframes sprite{
from { background-position:0 0;}
to { background-position:-2400px 0px;}
}
@keyframes sprite{
from { background-position:0 0;}
to { background-position:-2400px 0px;}
}