A Pen by Svein Erik Farstad.

Animation-on-load.markdown

Animation on 'load'

Starts an animation when page loads.

A Pen by Svein Erik Farstad on CodePen.

License.

index.html

<header>Test</header>

style.css

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

    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.5s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
}
@-moz-keyframes dropHeader {
    0% {
        top: -30px;
    }
    100% {
        top: 0;
    }
}
@-webkit-keyframes dropHeader {
    0% {
        top: -30px;
    }
    100% {
        top: 0;
    }
}