The shorthand transition rule has one advantage over the set of separate transition-<property> rules: you can describe unique transitions for multiple properties, and combine them.

To combine transitions, add a comma (,) before the semicolon (;) in your rule. After the comma, use the same shorthand syntax. For example:

transition: color 1s linear, font-size 750ms ease-in 100ms;

The above code transitions two properties at once. The text color transitions over one second with linear timing and no delay. At the same time, the font size transitions over 750 milliseconds with an ease-in timing and a 100 millisecond delay. This “chaining” is a powerful tool for expressing complicated animations.



Let’s try this with a deeper example. Note that some of the CSS used in this example is out of scope for this lesson; however, we’re confident you’ll have no trouble transforming the experience of a page with transitions.

When you mouse over the button in the browser, you’ll notice it instantly changes. Let’s fix this so that the change is animated.

Make a new CSS ruleset in style.css to target all elements within the button. There are three types of elements to account for, <span>, <div>, and <i>:

.button span, .button div, .button i { }

Within the new ruleset, add a shorthand transition declaration to transition the width of all elements. Set the property to be transitioned to width, the duration to 750ms, the timing function to ease-in, and the delay to 200ms.


That looks nicer except that the “DOWNLOAD” text disappears instantly. Let’s animate that in tandem.

Add a comma and another transition value for the left property.

Make the duration 500ms, the timing function ease-out, and the delay 450ms.


There’s one more instantaneous change to smooth out: the icon size.

Add another transition to the chain for font-size. Make the duration 950ms and the timing function linear. Since there is no delay on this transition, leave off the last delay value.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?