Transitions

Transitions in CSS

Now, let’s take a look at how to animate components using CSS transitions!

A transition occurs when we tell a CSS property value to change over a specified period of time.

We do this with the transition property, which is shorthand for the following properties:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

See how these properties look in the code snippet below:

.element {
  transition-property: property;
  transition-duration: duration;
  transition-timing-function: timing-function;
  transition-delay: delay;
} 

The code above is equivalent to:

.element {
  transition: property duration timing-function delay;
}

Transition Properties

We use the following transition properties:

• The transition-property property defines the transition we want to apply.
• The transition-duration property defines transition’s duration. The value is specified in seconds (5s for 5 seconds).
• The transition-timing-function property defines how the transition occurs.
• The transition-delay property allows us to set a delay before the transition starts. - The value is also specified in seconds (5s for 5 seconds).

Activating transitions

We can activate a CSS transition with pseudo-classes like :hover (moving a mouse over the element), :focus (clicking an input element), or :active (clicking the element).

Let’s take a look at an example: