Sprite keyframes Animation Bouncing Ball Tutorial

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

Sprite keyframes Animation Bouncing Ball Tutorial

Published : November 17, 2014
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>