⚠ī¸ 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.

Character Walk Cycle keyframes Sprite Animation Tutorial

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