Character Walk Cycle keyframes Sprite Animation Tutorial

Videos ➤ CSS ➤ Sprite Sheet Work ➤ Character Walk Cycle keyframes Sprite Animation Tutorial

Character Walk Cycle keyframes Sprite Animation Tutorial

Published : November 17, 2014
Author :

Adam Khoury

Learn to rig a walk cycle animation from a sprite sheet using the CSS @keyframes rule and the animation property.

<style>
#adam{
	background:url(images/adam.png);
	width: 120px;
	height: 180px;
	animation: walk-east 1.0s steps(8) infinite;
}
@keyframes walk-east {
	from { background-position: 0px; }
	to { background-position: -960px; }
}
</style>
<div id="adam"></div>