CSS3 Click Chart | CSS3 Browser Support and Information

Transitions

By means of changes to property values, allows you to create simple two-step transitions, or animations, over a specified duration on elements in response to state changes.

Specification

Transitions on W3C

Example Code

.element {
    background-color: red;
    -webkit-transition: background-color linear .8s;
    -moz-transition: background-color linear .8s;
    -o-transition: background-color linear .8s;
    transition: background-color linear .8s;
}

.element:hover {
    background-color: blue;
}

Live Demonstration

Hover over this element and it will gradually change background color.

Desktop Browser Support

Standard Syntax:
IE10+, Firefox 16+, Opera 12.1+

Vendor Prefix:
IE10+ (PP3), Firefox 4+, Chrome 4+, Safari 3.1+, Opera 10.5+

Tools / Polyfills

CSS3 Transition Animations With jQuery Fallbacks
The jQuery Transition project
cubic-bezier.com

Tutorials / Articles

CSS3 Transitions Without Using :hover