The transition allowed the property of an element to change within a specified period of time, with some touch of animation instead of just happening immediately. Let's change the background color of the square on hover.

You noticed the experience happened immediately, transition can make this experience better than what we currently have, so let's look at transition properties available and how it can better our experience as we hover over the element.

Transition-property: We specify the property we want the transition to be application, in this case, we are changing the background color on hover, and the transition-property will be declared like this.

transition-property: background-color

note that transition-property can also be set to all if you have more than one property to transit.

Transition-duration: This property determines the time it will take the transition to happen and is measured in second and millisecond

transition-duration: 2s

This duration will take 2 seconds to happen.

Transition-delay: Delay determines how long it should wait before the transition takes place, let's say we don't want the background-color of the element to change immediately we hover over it, and we want to wait for like 1 second before it takes effect.

transition-delay: 1s

with this property set the background color will not change immediately we hover on the element, it will take 1s to see the effect.

Transition-timing-function: this property set how the transition will proceed over its duration, with this you can set the speed at the start and end of the transition. The default is linear, we also have other values like ease-in, ease-out, ease-in-out, and cubic-Bezier.

transition-timing-function: ease-in-out;

Now let's gather all these properties together to better our experience when we hover on the element

We just added four lines of code just to make the experience better, what if I tell you there is a shortcut to handle all those properties in one line called transition?

transition: background-color .3s ease-in-out .1s

the first value is the transition-property, followed by duration, timing-function and delay.

In addition, if you have more than one property to transit, the background color can be replaced with "all", you may be thinking what if they don't have the same duration and timing function, then we can write it like this.

transition: background-color .3s ease-in-out .1s, width .2s linear

In conclusion whenever the state of an element needs to change at a point, use a transition to make the experience smooth.