Learn the Front-end Beta Search

transition

Draft

Definition

The transition CSS property is used to create smooth and animated transitions between different states of an element. It allows you to define how a property changes over time, specifying the duration, timing function, delay, and property values involved in the transition.

The transition property is shorthand and accepts several sub-properties in a space-separated list:

  • transition-property: Specifies the CSS properties that should be included in the transition. Multiple properties can be listed, separated by commas.
  • transition-duration: Specifies the duration of the transition, indicating how long the transition should take to complete. It accepts values in seconds (s) or milliseconds (ms).
  • transition-timing-function: Specifies the timing function that controls the acceleration and deceleration of the transition. It defines the pacing of the transition over time, such as ease, linear, ease-in, ease-out, etc.
  • transition-delay: Specifies the delay before the transition starts. It accepts values in seconds (s) or milliseconds (ms).

Here’s an example:

.element {
  transition: opacity 0.5s ease-in-out 0.2s;
}

In this example, the .element class sets the transition property to create a transition effect on the opacity property. The transition has a duration of 0.5 seconds, an easing function of ease-in-out, and a delay of 0.2 seconds.

You can specify multiple properties within the transition property by separating them with commas:

.element {
  transition: opacity 0.5s ease-in-out, background-color 0.3s linear;
}

In this example, both the opacity and background-color properties will have transition effects. The opacity transition will take 0.5 seconds with an ease-in-out timing function, while the background-color transition will take 0.3 seconds with a linear timing function.

The transition property is commonly used to enhance user experience and add visual effects to elements during state changes, such as hovering, clicking, or toggling. It provides a way to smoothly animate CSS properties and create polished transitions between different styles.