CSS3 Transitions

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

Change Several Property Values

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

Specify the Speed Curve of the Transition

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Delay the Transition Effect

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}

Transition + Transformation

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

References
http://www.w3schools.com/css/css3_transitions.asp

Related