CSS Transitions

Hover over and off the boxes to see the effects

transition: background-color 300ms ease-in;

transition: background-color, transform 300ms ease-in;

Separate Transitions Written in One Line

here we have:

transition-duration: 300ms, 3s;

transition-property: background-color, transform;

transition-timing-function: ease-in, cubic-bezier(0.1, 0.7, 1, 0.1);

One Transition Followed by Another

Animating

Animating on Actions (hover)