Skip to Content
Learn
CSS Transitions
Combinations

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.

Instructions

1.

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 declaration 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 { }
2.

Within the new declaration, add a shorthand rule to transition the width of all elements.

transition: width 750ms ease-in 200ms;
3.

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.

4.

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.

Folder Icon

Take this course for free

Already have an account?