If you must include an animation, only employ the opacity and transform CSS3 properties as well as the related functions: 'translate, rotate, scale, and transform'. The browser automatically optimizes these two properties ⚙️, and the GPU can handle the animation.
You can help the browser minimize the resources consumed by using will-change to warn ⚠️ it that an amination will take place.
The will-change property warns the browser that an animation, which it is capable of optimizing, will be triggered. Used intelligently 🧠, this approach will consume fewer resources.
#greenit #developer #animation