Untitled

<div class="wrapper">

        <h1>Maintaining CSS Style States using "Infinite" Transition Delays</h1>

       

        <div class="device">

                <button class="up"></button>

                <button class="down"></button>

                <button class="left"></buton>

                <button class="right"></button>

       

                <div class="screen">

                        <div class="char"></div>

                        <div class="overlay"></div>

                </div>

        </div>

       

        <section>

        <p>

                This demo is <strong>completely JavaScript-free</strong>.

                Feel free to move the character around with the D-pad, and notice how it always

                keeps its position after you stop moving.

        </p>

        <p>

                This is made possible by using a virtually infinite transition delay, so that the

                CSS rules never return to their default state. The character will always be stuck

                in a transition and only moves when you hold down a button.

        </p>

       

        <p>

                I've written a

        <a target="_blank" href="http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/"> blog post </a> explanining how

                this all works, but please keep in mind that things like this should ideally be handled

                with Javascript. After all, this is a dirty hack, not a CSS feature.

        </p>

        </section>

       

        <small>Credit goes to to <a target="_blank" href="http://www.tekepon.net/fsm/">First Seed Material</a> for the

        character sprite, and <a target="_blank" href="http://vxresource.wordpress.com/2010/03/17/the-real-macks-tileset/">

        Mack</a> for the map tileset.

         </small>

</div>