Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Transitions and Transforms Transition Timing Functions and Delays Combine Transition Properties with the transition Shorthand

Max Weir
Max Weir
14,963 Points
Posted by Max Weir
Max Weir
14,963 Points

Using transition all vs single property

In this video the photo-overlay was reduced down to just transition: .5s, removing the opacity property. Would it be better to specify the actual property here as wouldn't this cycle through all the transitions until the correct one ( opacity ) is used?

4 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

I never thought much about it before, but in that same course, I recall it being said that it would be more efficient to transition only the property(ies) that you want affected. I haven't done any performance analysis myself to confirm this, but it makes sense and I've started doing it as a general practice.

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

Exactly, I think a few videos back he mentioned being specific about the property being animated.

Julia Utenkova
Julia Utenkova
12,024 Points
Julia Utenkova
Julia Utenkova
12,024 Points

Apparently, CSS transition property uses your laptop CPU to render stuff in browser, not browser resources. I would stick to specific declaration, as you don't know what device your users will have, it could be mobile phone, an old laptop etc. But of course if you have 1-2 animations, you're perfectly fine, but if you're developing something cool and big and hardly animated (like a promo website), then we need to take into account that not everyone has latest devices and they can be affected really hard :(

Graeme Oxley
Graeme Oxley
8,931 Points
Graeme Oxley
Graeme Oxley
8,931 Points

Other than it being a performance issue, I am also pretty sure that a good reason to declare the specific properties being transitioned is that without doing so you will be sacrificing a large portion of customization as you won't be able to specify individual properties to transition at different speeds or in different ways (as I am pretty sure that that functionality requires the "transition-property" property to be defined).

From various sites that I have read about transitions, they seem to imply that you MUST declare the transition-properties. However we know this is not 100% true, it does imply that it is a commonly accepted fact that you should always define the properties.