Videos ➤ CSS ➤ Sprite Sheet Work ➤ Sprite keyframes Animation Bouncing Ball Tutorial

Sprite keyframes Animation Bouncing Ball Tutorial

Name: Sprite keyframes Animation Bouncing Ball Tutorial
Uploaded: 2014-11-17T00:55:47+00:00
Description: Watch Sprite keyframes Animation Bouncing Ball Tutorial video in the Sprite Sheet Work subsection of the CSS section. Learn CSS with Adam Khoury.

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>