CODEWITHSUNDEEP
css
user2874270
user2874270

Reputation: 1382

Is applying a CSS transition on all elements a performance concern?

I thought it would be a nice touch to add some CSS transitions to my website so that hover affects fade in/out. I was thinking a really simple way to do it would be with the code below:

a, div, input, button{

   -webkit-transition: background .5s;
    transition: background .5s;
}

That would make any background change fade in/out. Of course not every a, div, input and button on my site has a background change on hover, so you won't see transitions everywhere. But it got me wondering whether applying the transition so broadly would cause any browser performance issues, especially on phones.

So what do you think? Is it ok to implement as I have above? Or should I only apply the transition to specific elements/classes where it will apply?

Upvotes: 1

Views: 2617

Answers (2)

Niall Maher
Niall Maher

Reputation: 365

Transitioning certain properties, such as left and margin causes the browser to recalculate styles every frame. This can be one of the few cases where it can add noticeable weight to performance.

Other than that it is rather safe to use as many as you like, but as @SUJEET JAISWAL stated just make sure it doesn't create bad UX by going overboard too.

Upvotes: 1

Sujeet Jaiswal
Sujeet Jaiswal

Reputation: 1089

Adding transition/animation on your site will add some overload to memory and/or cpu as compared to plain site, but in practice I have never find CSS transitions/animation as a performance bottleneck. So you can use them as much as you want.

But you should add them only at places it is required. Adding them unnecessarily may cause a Bad UX.

CSS Animations , CSS Transition and Javascript's requestAnimationFrame() pauses when the current tab is pushed into the background.

If you are interested you should read this article from MDN

Upvotes: 0

Related Questions