Transition property (property, duration, timing)

Hover over a button whose color changes in a :hover rule, and the new color appears in a single frame. Add one declaration, transition: background-color 0.5s ease, and the browser fades from the old color to the new one over half a second instead. That gradual change between two values of a property is called a transition.

A first transition

The page below has one button. Its normal state is a medium green, and its hover state is a darker green. The transition declaration sits in the .btn rule, not in the `.btn:hover