Transition delay and timing-function

Here we have added a slightly different transition-delay to each element. So the transition is triggered at 0.02s intervals. We have also used a different transition-timing-function for each group.

Hover over the <article> elements to activate the transitions.

Ease (default)

Linear (constant)

Ease-in (starts slow, ends faster)

Ease-out (starts fast, ends slower)

Ease-in-out (starts and ends slower)

cubic-bezier(0.25, 0.75, 0.75, 0.25)