Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Performance
The short answer to the question of performance is you shouldn’t notice any difference between transitions and animations, assuming both are doing the same thing. The performance of an animated effect has more to do with what property values are being changed than whether you use a transition or animation to create the effect.
To render web pages, browsers first determine which CSS styles apply to which HTML elements. Then they lay out the page by working out the geometry and position for each element. Next, pixels are painted or filled in for each element. Finally, everything is drawn to the screen on one or more composite layers.
The order that rendering happens is important. It’s layout, then paint, then composite. The order is important because a layout change will then require a paint change and a composite change. The reverse isn’t true. If you make a change that impacts painting, it doesn’t automatically lead to reworking the layout.
Browser use two different execution threads to handle all of these different rendering layers: the main thread and the compositor thread.
The main thread is responsible for laying out and painting elements. It’s where CSS styles are calculated and applied to HTML elements, and it’s also where JavaScript runs.
The compositor thread draws to the screen via the computer’s GPU. It determines which parts of the page are visible or will soon be visible, and it controls the moving parts when you scroll around the page.
The main thread needs more time for its tasks. It tends to be busier for longer periods of time, and while busy it’s not responsive to input. The compositor thread, on the other hand, tries to remain responsive because it has to be aware of scrolling so it can redraw parts of the page.
Main thread responsibilities are more CPU-intensive while the compositor thread looks to the GPU more often. GPUs can quickly draw the same bitmaps over and over in different positions. They can scale and rotate bitmaps quickly as well or exactly what the compositor thread needs to do.
For better performance with either transitions or animations, you want to stay away from layout and painting changes and instead make compositing changes. You want to work with CSS properties that can be quickly animated. As I write this, there are five things browsers can animate or transition quickly:
- Translation
- Scale
- Rotation
- Opacity
- CSS filters
The list may seem limiting at the moment, but it will only grow as browsers continue to upgrade.