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.