Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Sprite keyframes Animation Bouncing Ball Tutorial

Learn to rig a bouncing ball sprite sheet animation using CSS @keyframes and the animation property. Get the Sprite Sheet PNG File <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>
thumb

CSS Videos

Sprite Sheet Work

Sprite keyframes Animation Bouncing Ball TutorialCharacter Walk Cycle keyframes Sprite Animation TutorialWeb Design Sprite Sheet Preload Graphics Tutorial