Change Elements Smoothly and Gradually with the CSS Transition Property

Whereas transforms move or change the appearance of an element, transitions make the element smoothly and gradually change from one state to another.

Without the transition property changing an elements state is immediate and jumpy.

The transition property is a shorthand property used to represent up to four transition-related longhand properties

• transition-property
• transition-duration
• transition-timing-function
• transition-delay