Bare Bones CSS3 Panel Animation

by Jonathan Stark

One of my Quick Question folks recently asked me to provide a code sample for a iPhone-esque panel animation using CSS3. She asked that I leave out any extraneous code in order to highlight the key points.

I have posted the code below for others who are trying to grok CSS3 animations. You can see it in action here.

BTW – I know could have done this with a transition, but for some reason animations make more sense to me.

HTH!


<html>
    <head>
        <title>Simple Slide Left In</title>
            <style type="text/css" media="screen">
                body {
                    margin:0;
                    padding:0;
                }
                .panel {
                    background-color:yellow;
                    display:none; 
                    min-height:460px;
                    position:absolute;
                    text-align:center;
                    width:320px;
                }
                .current {
                    -webkit-animation-duration: 500ms;
                    -webkit-animation-name: slideLeftIn;
                    -webkit-animation-timing-function: ease-in-out;
                    display:block;
                }
                @-webkit-keyframes slideLeftIn {
                    from { -webkit-transform: translateX(100%); }
                    to { -webkit-transform: translateX(0); }
                }
            </style>
            <script type="text/javascript" charset="utf-8">
                window.onload = function() {
                    document.getElementById('home').className = 'panel current';
                };
            </script>
    </head>
    <body>
        <div id="home" class="panel">
            <p>Hello World!</p>
        </div>
    </body>
</html>