CSS transitions enable us to control the timing of visual state changes. Color, background color, font size, width, and height are all states that can be transitioned.
CSS Transitions have 4 components:
If a value is not given for
transition-duration, by default, the value is 0s. This mean no animation will occur.
transition-timing-function property is used to describe how a transition will advance over its duration. Values such as ease-in, ease-out, ease-in-out, and linear allows a transition to change speed during its course.
transition-delay describes when the transition effect will start. The unit specified by this value is defined in seconds
s or milliseconds
Two (or more) CSS properties can be triggered in a single
transition by separating them with a comma.
all is a value for
transition-property that causes every changing property to transition.
transition CSS property is the shorthand syntax for transition-property, transition-duration, transition-timing-function, and transition-delay.