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:

• property: The CSS property to add a transition to. For example, width or color. Use all to apply transitions to all the properties.

• duration: The length of time the transition takes. For example, 0.5s takes half a second to complete the transition.

• timing-function: Determines how the transition progresses over the duration:

  • linear: The same speed from beginning...