Performance of CSS Transition vs CSS Animation

Question

I have a very simple situation: fading in / out elements on a page (simple div's, etc.). I know this can be accomplished with opacity with either CSS Transitions or CSS Animations.

Is there any performance difference between the two? I've always used CSS Transitions (mostly because they require fewer lines of CSS, etc.), but I'm wondering if using CSS Animations instead provide any benefit.

I have a similar question like this, there's also an example of some effects which perform rather bad imo: tinyurl.com/o8hk5br — Jonathan
– Jonathan, Commented Jun 27, 2013 at 20:39

Simon Boudrias · Accepted Answer · 2013-06-27 20:37:01Z

5

Nope, the performance should be just about the same.

opacity changes are handle by the GPU so on most modern browser you'll have a real smooth effect.

answered Jun 27, 2013 at 20:37

Simon Boudrias

44.9k16 gold badges109 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PixelsTech · Accepted Answer · 2015-06-17 15:49:04Z

4

In some cases CSS3 animation is slower than CSS3 transition as some painting work is not lifted to the GPU when using CSS3 animation.

Here you can find a detailed comparison of CSS3 animation vs CSS3 transition.

answered Jun 17, 2015 at 15:49

PixelsTech

3,3761 gold badge36 silver badges35 bronze badges

Collectives™ on Stack Overflow

Performance of CSS Transition vs CSS Animation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related