CSS3: Transition Timing Functions

Aug 19th, 2012

The CSS3 Transition spec has already defined various timing, or stepping, functions for us. What do these timing functions look like, you ask? Take a look.

A list of timing functions have already been defined in the transition-timing-function spec. Since I’m a visual guy I’d prefer to see what each of these timing functions look like with an example. Each example will move the square from left to right over 5 seconds when the container is hovered over. Learn more about CSS transitions.