CSS3 Transitions – transition-timing-function

On 06.13.12, In BLOGGING, by
  • Share
  • Share

There is a specific article on CSS3.info that I wanted to cover. It involves CSS3 transitions and how to stack and combine transitions.

The transition-timing-function property is used to specify how the pace of the transition changes over its duration. This can be done in one of two ways. Either by specifying a number of pre-defined keywords (ease, linear, ease-in, ease-out or ease-in-out), or by defining a custom timing function (by specifying four coordinates to define a cubic bezier curve).

For Example:

  1. transition-timing-function: ease;
  2. transition-timing-function: ease, linear;
  3. transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

The example below demonstrates how each different function behaves. Each box below will expand in width from 150px to 500px when the example is hovered over, with all transitions being of the same duration (3 seconds) and triggered simultaneously.

ease
linear
ease-in
ease-out
ease-in-out

The timing function is specified using a cubic bezier curve, which is defined by four control points, P0 through P3 (see diagram below). P0 and P3 are always set to (0,0) and (1,1). The ‘transition-timing-function’ property is used to specify the values for points P1 and P2. These can be set to preset values using the keywords listed (see above), or can be set to specific values using the ‘cubic-bezier’ function. In the ‘cubic-bezier’ function, P1 and P2 are each specified by both an X and Y value.

timing graph on css3 transitions

The final step in a creating a transition effect is to specify an optional delay using the transition-delay property. As with the transition-duration property, the transition-delay property accepts a comma-separated list of times, specified in seconds or milliseconds, which in this case determines the length of time between the transition being triggered and the transition starting. The default value is 0, ie. the transition will commence as soon as triggered.

Negative values are accepted for transition-delay. When supplied the transition will commence as soon as triggered, however it will appear to have begun execution at the specified offset, ie; the transition effect will begin part-way through its cycle (see the examples section below for an example).

The Syntax:

transition-delay:

This is an extremely good article to read about CSS3 transitions. I would highly recommend giving it a read before your next project.