Jens Törnell Jens Törnell - 1 month ago 18
CSS Question

css3 transition animation on load?

Is it possible to use CSS3 transition animation on page load without using Javascript?

This is kind of what I want, but on page load:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

What I found so far


Answer

You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.

Here's a demonstration of a navigation menu sliding into place using CSS3 only: DEMO


Here's the code:

header {
    background: #000;
    color: #fff;
    height: 20px;
    position: relative;
    padding: 30px;

    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.6s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.6s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.6s;
}
header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
header ul li{
    display: inline-block;
    margin-right: 20px
}
@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateY(-80px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateY(-80px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes dropHeader {
    0% {
        transform: translateY(-80px);
    }
    100% {
        transform: translateY(0);
    }
}


/* Added for aesthetics */

body {
    margin: 0; 
    font: normal 14px "Segoe UI", Arial, Helvetica, Sans Serif;
}
a {
     color: #eee;
     text-decoration: none;
}
<header>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</header>

You can do all sorts of interesting things, like sliding in content, or drawing attention to areas.

Here's what W3C has to say: http://www.w3.org/TR/css3-animations/#keyframes