⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Sprite keyframes Animation Bouncing Ball Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲