CSS Transitions

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:

• A property that will transition.
  
• The duration which describes how long the transition takes.
  
• The delay to pause before the transition will take place.
  
• The timing function that describes the transition’s acceleration.

If a value is not given for transition-duration, by default, the value is 0s. This mean no animation will occur.

The 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.

The transition-delay describes when the transition effect will start. The unit specified by this value is defined in seconds s or milliseconds ms.

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.

The transition CSS property is the shorthand syntax for transition-property, transition-duration, transition-timing-function, and transition-delay.