Menu
I am trying to prevent browser repainting to improve performance on a large single page app that makes use of CSS animations.
If I have an element that has a :hover { transform: scale(...) } effect on it, I can prevent repaints by using the will-change: transform and/or transform: translateZ(0) as mentioned here.
But as soon as I add a transition to that element, many elements start being repainted again.
Here is a demo codepen and a gif of it
The only thing that worked to prevent this repaint is to put the other elements before the animating element in the DOM order, or to z-index the animating element above the other elements. But with a complex single-page app, I do not want to have to micromanage the z-index of any element that just wants a hover transition.
Any other ideas or references? I haven't seen this specific problem with transitions discussed elsewhere.
664
To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.
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.
Transitions animate a object from one point to another. Animation allows you to define Keyframes which varies from one state to another with various properties and time frame. Use transition for manipulating the value using JavaScript. Flexibility is provided by having multiple keyframes and easy loop.
It seemed like the position: absolute; on .other was not creating a new layer, I was able to solve the issue by adding transform: translateZ(0) to the .other class.
JSbin
Given that you're working on a SPA, i'm not sure how feasible this approach is, since there could be hundreds of elements after the circle.
73
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
