The Not Too Distant Future of CSS - The CSS - page 254

transition-duration
The time it takes to transition from the original value of a property to the
final value can be set via the transition-duration property.
■ <time> : The time it takes for a transition to complete; in seconds
( s units)
transition-timing-function
By default the transition between values of a property is animated
along an even, linear function. You can alter this change via the
transition-timing-function by choosing between several built-in
functions or a custom cubic-Bezier curve.
■ ease | linear | ease-in | ease-out | ease-in-out : Keywords represent-
ing different types of built-in functions for animation
■ cubic-bezier(<number>, <number>, <number>, <number>) : A transi-
tion function to define a custom cubic-Bezier curve
transition-delay
You can add a delay before a transition using the translation-delay
property.
■ <time> : The time it takes before for a transition begins animating; in
seconds ( s units)
transition (Shorthand)
The shorthand transition property accepts one or more groups of
transition subproperty groups in the order: <transition-property>
<transition-duration> <transition-timing-function> <transition-
delay> . The following code example defines the transform for the hover
state on an image and applies a basic easing animation to the transition.