Search⌘ K
AI Features

Transitions

Explore how to apply CSS transitions to animate property changes over time. Learn to use transition properties like duration, timing function, and delay, and activate transitions with pseudo-classes for smooth visual effects in web design.

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