CSS Transitions

Change the values in the boxes below and click Open/Close button to see the effect

Animating multiple properties

Animate CSS max-width and opacity properties

Opening transition

Closing transition

Animate CSS max-width property with different timing functions

Duration

Timing functions

linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier(0.4, 1, 0.6, 5)

steps(5, jump-start)

step-start

step-end