The Old: translateZ() or translate3d() Hack
For quite some time, we used what was known as translateZ () (or translate3d ()) hack (sometimes also called null transform hack) to trick the browser by clicking on our animations and turning into hardware acceleration. We did this by adding a simple three-dimensional transformation to an element that will not be transformed in three-dimensional space. For example, an element that animates into two-dimensional space can be hardware accelerated by adding this simple rule:
transform: translate3d(0, 0, 0);
Hardware acceleration of the operation leads to the creation of what is known as the composer layer, which is loaded and compiled using the GPU. However, creating a forced crack layer may not always be the solution to certain performance bottlenecks on the page. Creating a layer methods can increase page speed, but they come with a cost: they take memory in RAM and on the GPU (especially on mobile devices) and having a large number of them can have a bad effect (especially on mobile devices), so you need to use it wisely, and you need to make sure that hardware acceleration of your operation will really help your page performance and that the performance bottleneck is not caused by another operation necks page.
To avoid hackers creating layers, there was a new CSS property that allows us to tell the browser in advance what types of changes we can make to an element, which allows us to optimize how it controls the element ahead of time, performing potentially expensive work in preparation for the operation such as animations, for example, before the animation begins. This property is a new property for changing a variable.
New: glorious change of properties
The will-change property allows you to tell the browser before what time you can make changes to the element, so that it can adjust the appropriate optimizations before they need to avoid the non-trivial cost of launching, which can have a negative effect on the responsiveness of the page. Elements can be resized and displayed faster, and the page will be able to refresh snappily, resulting in a smoother experience.
For example, when using CSS 3D Transforms on an element, the element and its content can be raised to a level, as we mentioned earlier, before they are arranged (drawn on the screen) later. However, creating an element in a new layer is a relatively expensive operation, which can delay the start of animation conversion with a noticeable fraction of a second, resulting in a noticeable “flicker”.
To avoid this delay, you can tell the browser about changes for a while before they actually happen. Thus, some time to prepare for these changes, so that when these changes, the layer of elements will be ready and the animation of the transformation can be performed, and then the element can be displayed, and the page is quickly updated.
Using will-change, hinting to the browser about an upcoming conversion, can be as simple as adding this rule to the element that you expect conversion:
will-change: transform;
You can also tell the browser your intention to change the scroll elements (the position of the elements in the visible scrollable window and how much it is visible in this window), its contents, or one or more values of its CSS properties, by specifying the name of the properties you expect to change. If you expect or plan to change multiple values / aspects of an element, you can provide a list of values separated by commas. For example, if you expect an element to be animated and moved (its position has been changed), you can declare this to the browser as follows:
will-change: transform, opacity;
Specifying exactly what you want to change allows the browser to make the best optimization decisions that need to be made for these specific changes. This is obviously the best way to achieve acceleration without resorting to hacking and forcing a browser that may or may not be necessary or useful.
Article Source - Everything You Need to Know About CSS Will Change a Property