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;
 

...