Transitions

We have a pretty good looking UI now, but we can make it even better with some transitions. CSS3 transitions add animation effects to elements when their styles change. For example, if we change the size of an element, it will gradually change from smaller size to a larger size thereby providing visual feedback to the user. When things change gradually, it catches our eye more than something that just appears suddenly on the page.

The CSS3 transition property allows us to specify transitions on elements. It has the following format:

transition: property duration timing-function delay

Here is an explanation of the parameters:

The cubic-bezier function takes four parameters which are numbers from 0 to 1. The following produces the same effect as the ease function:

transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);

Building your own cubic-bezier functions isn't something most people can just do in their heads. If you want to explore creating your own timing functions, check out http://cubic-bezier.com/.

Like the gradients, transitions are widely supported, but you should still use browser-specific prefixes when declaring it:

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all  1s ease;
transition: all 1s ease;

The easiest way to apply a transition is in combination with a CSS hover selector. The following will fade the background color of an element from white to blue in one quarter of a second when the user moves the mouse over it:

#some-element
{
    background-color: White;
    transition: all 0.25s ease;
}
#some-element:hover
{
    background-color: Blue;
}