Learning web technologies one class at a time

CSS3 transitions

CSS3 transitions smooth out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change, an effect previously only possible using JavaScript, but now possible with a few simple lines of CSS.

XHTML

1

<a href="#"class="foo">Transition me!</a>

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover.