Jens Törnell Jens Törnell - 1 year ago 214
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:

What I found so far

Answer Source

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;
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>

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

Here's what W3C has to say:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download