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 NeedsIt 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

ease

linear

ease-in

ease-out

ease-in-out

step-start

step-end

steps()

cubic-bezier()

Easing functions you can specify:

Longhand Versions

transition-property: all;transition-duration: .5s;transition-timing-function: ease-in;transition-delay: .1s;

What we’ve looked at so far is the shorthand version of the transition property. Here is the long-hand version:

Generally, just stick with the shorthand versions.

Vendor Prefixes

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;

For older browsers, you will need to prefix your transition properties with the appropriate –moz, -ms, -o, or –webkit text.

Or…use 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!