Is there a downside to setting a CSS3 global background transition on all elements?
I started playing with CSS3 transitions in one of my projects, and I found that I basically want to have a transition to the background color for each element that changes it on hover.
If I am something like
a {
transition-property: background;
transition-duration: 0.15s;
transition-timing-function: ease-out;
transition-delay: 0;
}
or even
* {
transition-property: background;
transition-duration: 0.15s;
transition-timing-function: ease-out;
transition-delay: 0;
}
Is there a downside? Since this won't affect elements that don't change the background color, the only problem that comes to my mind is that it will have some effect on the browser.
Can there be too many transitions to delay the browser? Or are there any special cases where I have to disable transitions all together?
source to share
Transitions will be costly when the animations do occur, definitely, but I find that this is not enough.
The universal selector is not as slow as most people are. It's kind of a waste of applying styles to elements that will never use those styles, but that waste doesn't make up for much. However, it is always best to be specific as to which elements you want to apply a transition to, but in this case, I suppose that applying a global transition sounds fair if you can justify it.
I think you just need to be careful not to apply changes to revised properties for too many items. For example, in your case, remember that state :hover
applies to both the element and all of its ancestors (in any case in desktop browsers with the correct behavior :hover
).
For what it's worth, modern browsers come with hardware acceleration for a few things (IE9 + for pretty much everything ); coupled with modern hardware hardly noticeable performance for transitions, at least on desktops and laptops. Mobile devices (smartphones and tablets) can be more limited, but if you're working with responsive designs, you can easily disable transitions using toggles @media
.
These are just my two cents. I haven't played with transitions myself, but to recap: I'd rather be specific when applying transitions, but not hurt to apply them all over the place, as long as you know what you are doing.
Of course, you can always turn off transitions for certain elements by creating a new rule with whatever selector you use and giving it transition-property: none
.
source to share