display: none instead of
opacity: 0 to hide elements/ implementation details.
But opacity is a better choice for performance because it is one of the things the browser can use the GPU to animate, a process known as hardware acceleration.
Using the GPU leads to smoother animation as the browser does not have to re-paint the areas of the screen that are animating. Instead, the browser paints the elements to be animated to "layers" that are uploaded to the GPU, which it can then animate.
Note that the browser doesn't always create new layers for the GPU when you want it to, so you can force it to do so by setting certain properties like
backface-visibility (old) or
Examples where you might use will-change:
- Where you have an element whose transform property is used to animate or add some sort of effect adding
will-change: transformtells the browser this property of the element will change in the near future then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens.
will-change: contents(something about the element’s contents will change in the near future).
Having said these there are few caveats to using will-change:
- The browser already tries as hard as it can to optimize everything so do not apply will-change to too many elements.
- Will-change is intended to be used as something of a last resort, in order to try to deal with existing performance problems. Don't apply will-change to elements to perform premature optimization. :)
With this relatively short post I hope I've been able to add to your wealth of knowledge! :)
To know more about the will-change property visit MDN