Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using multiple CSS transitions

Sunday, October 27th, 2013 by Servage

So far, we’ve changed only one property at a time, but it is possible to transition several properties at once. I want the text color to change to black, but more slowly than the other animations. One way to do this is to list all of the values for each property separated by commas, as shown in this example.

a.smooth {

transition-property: background-color, color, letter-spacing;
transition-duration: 0.3s, 2s, 0.3s;
transition-timing-function: ease-out, ease-in, ease-out;
}
a:hover, a:focus {
background-color: red;
letter-spacing: 3px;
color: black;
}

The values are matched up according to their positions in the list. For example, the transition on the color property (second in the list) has a duration of two seconds (2s) and uses the ease-in timing function. If one list has fewer values than the others, the browser repeats the values in the list, starting over at the beginning. In the previous example, if I had omitted the third value (.3s) for transition-duration, the browser would loop back to the beginning of the list and use the first value (.3s) for letter-spacing. In this case, the effect would be the same.

You can line up values for the shorthand transition property as well. The same set of styles we just saw could also be written as:

a.smooth {

transition: background-color 0.3s ease-out,

color 2s ease-in,

letter-spacing 0.3s ease-out;

}

That seems like a nice way to go, especially when you consider you have four vendor-prefixed versions to add to each transition declaration.

A transition for all occasions

But what if you just want to add a little bit of smoothness to all your state changes, regardless of which property might change? For cases when you want the same duration, timing function, and delay to apply to all transitions that might occur on an element, use the all value for transition-property. In the following example, I’ve specified that any property that might change for the a.smooth element should last .2 seconds and animate using the ease-in-out function.

a.smooth {

-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

For user interface changes, a short, subtle transition is often all you need for all your transitions, so the all value will come in handy.

The shorthand transition property

Thankfully, the authors of the CSS3 spec had the good sense to give us the shorthand transition property to combine all of these properties into one declaration. You’ve seen this sort of thing with the shorthand border property.

Here is the syntax:

transition: property duration timing-function delay;

The values for each of the transition-* properties are listed out, separated by character spaces. If you provide only one time value, it will be assumed to be the duration. If you provide two time values, make sure that the duration is listed first.

Using the blue-to-red link example, the four transition properties we’ve applied so far could be combined into this one line:

a.smooth {

transition: background-color 0.3s ease-in-out 0.2s;
}
And the full prefixed version is reduced from 20 lines to 5.
a.smooth {

-webkit-transition: background-color 0.3s ease-in-out 0.2s;
-moz-transition: background-color 0.3s ease-in-out 0.2s;
-o-transition: background-color 0.3s ease-in-out 0.2s;
-ms-transition: background-color 0.3s ease-in-out 0.2s;
transition: background-color 0.3s ease-in-out 0.2s;
}

Definitely an improvement.

Resources for further reading

Using multiple CSS transitions, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.