Bert Bos & Eva Kasal | CSS3 in Style

CSS Transitions

CSS3 Transitions are a presentational effect which allows property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration – rather than happening instantaneously as is the normal behaviour.
Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more.

	transition-property: background, width;

April 2012: experimental implementations (prefixes)

CSS Transitions

Step 1: transition-property

The first step in creating a transition effect is to specify which CSS property (or properties) the transition effect will be applied to.
This can be done using the transition-property property, which can accept one of two keywords, all (the initial value) or none, or a comma-separated list of properties.

transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color, height, width;

CSS Transitions

Step 2: transition-duration

The transition-duration property accepts a comma-separated list of times, specified in seconds or milliseconds, which determine how long the corresponding properties (specified using transition-property) take to complete their transition.

transition-duration: 2s; transition-duration: 4000ms; transition-duration: 4000ms, 8000ms;

Notabene: The transition-duration property is in fact the only property required to create a transition effect; if transition-property is not supplied, all properties that are able to undergo a transition will do so.

CSS Transitions

Step 3: transition-timing-function

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).

the syntax: 
 = ease | linear | ease-in | ease-out | ease-in-out
 = cubic-bezier(, , , )
transition-timing-function: ease; transition-timing-function: ease, linear; transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

If no timing function is specified, the default value is ease.

CSS Transitions

Step 3 bis: transition-timing-function: bezier curve

In addition to the pre-defined timing functions, custom timing functions can be declared using the cubic-bezier function.
According to the specification:

Timing function
<timing-function> = cubic-bezier(<number>, <number>, <number>, <number>) ease The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0). linear The linear function is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).
from the demo examples: 
:nth-child(1):hover{ transition-timing-function: cubic-bezier(0.3, -0.3, 0.7, 1.3); }

CSS Transitions

Step 4: transition-delay (optional)

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, the transition will commence as soon as triggered.

transition-delay: 5s;
transition-delay: 4000ms, 8000ms;
transition-delay: -5s;

CSS Transitions

More examples

Simple focus
Simple figure focus
Hardboiled Slider
Hardboiled 3d
blur menu
polaroid table