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