Good UI (tastefully) animates

you between states.

A transition is a visualization of
something changing over a
period of time (aka an animation)

What a CSS Transition Needs

It needs three things:
1. The CSS property to apply the transition to
2. How long the transition will last
3. What kind of a timing function (aka easing
function) to use

Meet the transition Property

Timing (Easing) Functions

Easing functions you
can specify:
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps()
cubic-bezier()

Longhand Versions
What weve looked at so far is the shorthand version
of the transition property. Here is the long-hand
version:
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease-in;
transition-delay: .1s;

Generally, just stick with the shorthand versions.

Vendor Prefixes
For older browsers, you will need to prefix your
transition properties with the appropriate moz,
-ms, -o, or webkit text.
transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;

Oruse an awesome library like prefix-free and

avoid bloating your markup.

Summary

Additional Resources
To learn more go to kirupa.com and search for transitions.

For help, post on the forums at: kirupa.com/forum

@kirupa

facebook.com/kirupa

youtube.com/kirupa

Available on amazon.com in Paperback and

Kindle editions!