Don’t Forget About “transition: all”

Customarily, when writing CSS3 transition code, you’ll see something like this (vendor prefixes omitted for brevity):

.element {
	width: 400px;
	height: 400px;
	transition: width 1s ease-in;
}

.element:hover {
	width: 500px;
}

So here we’ve specified the width and height of an element, then we’ve given instructions for a width change to occur on hover. In the transition shorthand property, the part that specifies the property to be transitioned is the transition-property property.

If however, we want to animated both the width and the height, then we have the option to do this:

.element {
	width: 400px;
	height: 400px;
	transition: width 1s ease-in, height 1s ease-in;
}

.element:hover {
	width: 500px;
	height: 500px;
}

So the transition property allows you to comma-separate different properties to be transitioned. But assuming you want the same duration and timing function for both properties, then this seems somewhat redundant and inefficient.

So instead, you can do this:

.element {
	width: 400px;
	height: 400px;
	transition: all 1s ease-in;
}

.element:hover {
	width: 500px;
	height: 500px;
}

This uses the all keyword to identify that we want all properties to transition. In fact, the keyword value “all” is the initial value for the transition-property property, so you could actually leave it out, like this:

.element {
	width: 400px;
	height: 400px;
	transition: 1s ease-in;
}

And this would produce the exact same result, transitioning both width and height (or any other properties that we add later). Interestingly, the only value in the shorthand notation that’s required is the duration, so you could just have a line that says transition: 1s and it would still work the same way, except with the initial transition-timing-function of “ease”.

I should also point out that the spec has some red annotations discussing the possibility that the initial value of “all” could be replaced by an initial value of “none”. So keep that in mind if you plan to use this value or assume its inclusion through omission.

How is This Helpful?

Well, you might start out transitioning one or two properties, but then decide to add some others that you want transitioned. So, if the other transition-related values are the same, then it would be much easier to just have the “all” keyword in there from the start, so you don’t have to specify each property in a comma-separated list.

But of course, unless I’m mistaken, this would only apply if you actually have a base duration and timing function for all the properties being transitioned.

Conclusion

If you’ve used CSS3 transitions a lot, then you probably already knew about the “all” keyword. I’ve actually been using transitions for a while and had completely forgotten about this one until recently.

But definitely a “good to know” type of thing that could come in handy and may save you a few extra lines of code.

Update (Nov. 28/2011): As pointed out by Hans Christian Reinl, it’s possible that there could be a performance hit when using transition: all. I haven’t seen any official documentation to verify this, but this tweet by Simurai suggests the possiblity. I’ll update this post if anything conclusive is found.

Advertise Here

20 Responses

  1. Thanks for this, its a very useful tip

  2. But you might have a problem in the future if you want to change something on hover, or on focus, that you don’t want to animate with transitions. You’ll have to rewrite it then.

  3. First time that I try this CSS3 property.
    Do you know the browser compatibility list with this property ?

  4. I’m not sure this is a good idea, setting to animate all properties could lead to unexpected behaviors and there will probably be a hit in performance. I most cases you won’t animate more than 4 properties anyway.

    Here’s what I use

    
    transition: 1s ease-in;
    transition-property: height, width;
    
  5. Emma:

    Nice little top, thanks. I don’t think you’d want to use loads of different transitions in one go – or on one site – I think would end up looking like the CSS equivalent of using all sorts of Microsoft clip art on the same page. I think subtlety should be the key!

  6. Very useful! Thanks a lot!

  7. Thanks for this article.

    Simurai tweeted that `transition: all` might be a performance issue as the browser needs to repaint the whole window. It might not be a notable problem but maybe worth pointing it out and/or deciding to better use the relevant property if possible.

    Personally I mostly use `all` anyway.

  8. This was a surprisingly useful, well-written article. thanks!

  9. i am not surprise on this articles its a code of .element which is used in Css3!

  10. Sweet stuff thanks Louis.

  11. Tom:

    The “all” keyword requires a browser to traverse the DOM unnecessarily and so can create overheads that will detrimentally affect UX on slower boxes, it should be avoided.

    • Yes, I had already added an update box to suggest that performance issues could occur. Is there a conclusive reference we can point to that demonstrates or discusses this?

      • Tom:

        Apologies I had not seen this, should have read more carefully before commenting.

        I do not believe you need a reference, creating overheads simply because its easy is bad practise, no matter how negligible the overheads in certain use-cases authors should be encouraged to understand and implement these animation properties properly.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.