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.
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
transition-delay: Specifies the delay before the transition starts. It accepts values in seconds (s) or milliseconds (ms).
Here’s an example:
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
You can specify multiple properties within the
transition property by separating them with commas:
transition: opacity 0.5s ease-in-out, background-color 0.3s linear;
In this example, both the
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.
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.