Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Character Walk Cycle keyframes Sprite Animation Tutorial

Learn to rig a walk cycle animation from a sprite sheet using the CSS @keyframes rule and the animation property. Get the Sprite Sheet png Image File <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>
thumb

CSS Videos

Sprite Sheet Work

Sprite keyframes Animation Bouncing Ball TutorialCharacter Walk Cycle keyframes Sprite Animation TutorialWeb Design Sprite Sheet Preload Graphics Tutorial