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.
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.
Thanks for this, its a very useful tip
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.
First time that I try this CSS3 property.
Do you know the browser compatibility list with this property ?
http://caniuse.com/#feat=css-transitions
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
Yep, that might be good advice, combining the shorthand with the longhand like that.
The problem with ‘all’ is that when you have a JS callback to fire on transitionEnd, then transitionEnd gets fired for each of these properties that change.
Love your suggestion about using “transition-property” I will use it for sure in the future.
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!
nice tip. thanks.
Very useful! Thanks a lot!
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.
Sounds like a valid point to me. At least worth looking into.
I’ll update the article to include a link to that tweet. Thanks!
Great! Thank you for updating!
This was a surprisingly useful, well-written article. thanks!
i am not surprise on this articles its a code of .element which is used in Css3!
Sweet stuff thanks Louis.
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?
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.
Great stuff! easy to use. Thanks