# Cross-browser CSS transitions

``````.foo {
transition:         opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition:    opacity .25s ease-in-out;
-o-transition:      opacity .25s ease-in-out;
}
``````

Where the right-hand side has the general form:

``````PROPERTY DURATION [TIMING-FUNCTION] [TRANSITION-DELAY]
``````

Transitions can chained:

`````` .foo { transition: opacity .25s ease-in-out, height 1s linear }
``````

## Transition timing functions

• `linear` - constant rate of change between states.

`cubic-bezier(0.0, 0.0, 1.0, 1.0)`

• `ease` - (the default) slow acceleration, then faster, before rapidly slowing again at the end.

`cubic-bezier(0.25, 0.1, 0.25, 1.0)`

• `ease-in-out` - like ease but accelerating/decelerating more rapidly (with a shorter transition between acceleration and deceleration).

`cubic-bezier(0.42, 0, 0.58, 1.0)`

• `ease-in` - equivalent to the first half of ease-in-out; rapid accelerating then transitioning to a constant rate of change at the end.

`cubic-bezier(0.42, 0, 1, 1.0)`

• `ease-out` - equivalent to the second half of ease-in-out; a constant rate of change transitioning rapid deceleration at the end.

`cubic-bezier(0.42, 0, 0.58, 1.0)`

• `cubic-bezier(x1,y1,x2,y2)` - follows cubic Bézier curve using the control points (0,0), (x1,y1), (x2,y2) and (1,1).

• `steps( n, [start|end] )` - stepwise function with n steps

## How to read `cubic-bezier` functions

Imagine the transition as a stepwise function starting at (0,0) and ending at (1,1) and with two steps in between. The `cubic-bezier(x1,y1,x2,y2)` function specifies the points in the middle. In other words, x1 and x2 are the times at which the second and third steps happen, respectively (expressed as a fraction of the total transition duration) and y1 and y2 are how far along the transition is at x1 and x2, respectively (expressed as a fraction of the total transition "distance"). Very loosely, the cubic-bezier function "smooths" those steps.

These are nicely demonstrated here.

Tagged css, html, web and design.