Animate png sprites with css3 animations

Here’s a demo I made on Codepen that let’s you play with Ken (from Street Fighter II). There are several moves, like jumping, walking, etc and of course there’s the famous Hadoken! 🙂 It’s made with only CSS transitions and a minimum of javascript that let’s you control Ken.

See the Pen Ken’s Street Fighter II with animated sprites by Julien Knebel (@jkneb) on CodePen.

UPDATE
And here’s the post I wrote for the David Walsh Blog → where I explain how it works in details.

Had a lot of fun while making it 😉

8 thoughts on “Animate png sprites with css3 animations

Leave a Reply to Anonymous Cancel reply