Question

I’ve started playing around with CSS3 transitions in one of my projects, and I found that I basically want to have a transition on background color for every element that changes it on hover.

If I do 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 any downside? Since it won’t affect the elements that don’t change background color, the only problem that comes to my mind is that it will have some effect on the browser.

Can using too many transition cause the browser to be laggy? Or are there any special cases where I should disable transitions all together?

Answer 1

Transitions will be costly when the animations actually happen, definitely, but I reckon there’s little effect beyond that.

The universal selector is not as slow as most people make it out to be. It is kind of a waste applying styles to elements that will never use those styles, but that waste is not much to make up for. That said, it’s always best to be specific as to which elements you want to apply transitions to, but in this case I suppose applying a global transition sounds fair, if you can justify doing so.

I think you just have to be careful not to apply changes on transitioned properties for too many elements. For example, in your case, remember that the :hover state applies to an element as well as all of its ancestors (in desktop browsers with well-defined :hover behavior, anyway).

For what it’s worth, modern browsers come with hardware acceleration for a number of things (IE9+ for pretty much everything); coupled with modern hardware there’s hardly any discernible performance hit for transitions, at least on desktops and laptops. Mobile hardware (smartphones and tablets) may be more limited, but if you work with responsive design you can easily turn off transitions via @media toggles.

These are just my two cents. I haven’t played with transitions much myself, but to summarize: I’d rather be specific when applying transitions, but it doesn’t hurt to apply them universally as long as you know what you’re doing.

Of course, you can always disable transitions on certain elements by making a new rule with whatever selector you use and giving it transition-property: none.