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 😉
Thank you for this nice explanation and for choosing Street Fighter II 😀
This made my day. Wonderful! 🙂
that’s f*** awsome. well done.
Well done! It would be good to have some explanations about how animation works in CSS3 like here: animation in CSS3.
Keyframes have huge features.
Indeed 🙂 Thanks for pointing it out