Skip to Content
CSS Transitions

Even with the shorthand, specifying transitions for many properties can be tedious. It is common to use the same duration, timing function, and delay for multiple properties. When this is the case you can set the transition-property value to all. This will apply the same values to all properties. To effect this, you can use all as a value for transition-property.

all means every value that changes will be transitioned in the same way. You can use all with the separate transition properties, or the shorthand syntax. This allows you to describe the transition of many properties with a single line:

transition: all 1.5s linear 0.5s;

In this example, any change will be animated over one and a half seconds after a half-second delay with linear timing.



Replace all the combined transitions with one single transition for all.

Use a duration of 1.2s, a timing function of ease-out, and delay of 0.2s.

Folder Icon

Take this course for free

Already have an account?