Transition in CSS lets you animate a change. It slows down the
change in state by introducing intermediate states, hence adding
to the animation.
Clicking the button in the example above will cause its color to smoothly
transition from white to black, and its scale to reduce.
This effect is achieved using the transition,
which is a short-hand for transition-property, transition-duration,
transition-timing-function and transition-delay.
Let's understand these four terms:
- transition-property: This determines the CSS properties to be transitioned. In the example above,
we chose to transition background-color, transform and color.
- transition-duration: This determines the length of transition, which is the time taken to reach
the final state from initial state.
- transition-timing-function: This specifies the
speed curve of a transition effect. In simple terms, it defines how the transition progresses over time.
Some common transition-timing-functions are
linear, ease-in, ease-out, ease.
- transition-delay: This determines how long to wait before the transition begins.
We can specify multiple CSS properties in transition-property by separating them with ,.
In the example below, we will demonstrate by applying each of the four properties
using the shorthand transition.