Sprite keyframes Animation Bouncing Ball Tutorial
Learn to rig a bouncing ball sprite sheet animation using CSS @keyframes and the animation property.
<style>
#ball{
background: url(images/ball_bounce.png);
width: 50px;
height: 50px;
animation: ball-bounce 0.7s steps(6) infinite;
}
@keyframes ball-bounce {
from { background-position: 0px; }
to { background-position: -300px; }
}
</style>
<div id="ball"></div>