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.

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

Check out this Pen!

Had a lot of fun while making it ;)

Be Sociable, Share!

    Commentaires

    1. Pingback: CSSアニメで躍動するストIIのケン | ソフトアンテナブログ

    2. Pingback: ケン(ストリートファイターⅡ)の必殺技をCSS3で完全再現 - DNA

    3. Pingback: Street Fighter II en Javascript et sprites CSS 3

    Leave a Reply to Josh of Cubicle Ninjas Cancel reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>