CSS3 Transition

The transition instructions are attached to the normal state and therefore declared only once, then triggered on for eg. hover.


                                          /* Attach transition instructions - Long version */a.foo {
    background: #000;
    -webkit-transition-property: background  -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 0.5s;
       -webkit-transition: background 0.3s ease 0.5s;
    /* Can replace last 4 lines above */  -webkit-transition: all 0.3s ease 0.5s;
    /* Transitioning all possible properties (color and backgrind in this case)*/   transition: background 0.3s ease 0.5s;
    /* Let's put this here since we hope one day transition will be standard */
}
 /* Attach transition instructions - Short version (showing 2 properties) */a.foo {
    background: #000;
    -webkit-transition: background 0.3s ease 0.5s, color 0.2s linear;
}
 /* Trigger the transition by hover or focus */a.foo:hover, a.foo:focus, a.foo:active {
    background: #CCC;
    color: #678;
}

Favorite0