Menu
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.
242
CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements. It's easy to confuse CSS transitions and animations because they let you do similar things. Here are just a few examples: You can visualize property changes.
CSS transitions offer you a way to create simple animations that always start as the result of triggering a CSS property change. Transitions can animate only between a start and end state, and each state is controlled by existing CSS property values.
Continuous animations can consume a significant amount of resources, but some CSS properties are more costly to animate than others. The harder a browser must work to animate a property, the slower the frame rate will be.
An animation is a special effect that applies to a single element on a slide such as text, a shape, an image, and so on. A transition is the special effect that occurs when you exit one slide and move on to the next during a presentation.
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.
162
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
