<div style={{ border: "1px solid black", transition: "border 2s ease" }}/>This rule aims to limit the usage of all types of CSS animations which can be very costly in terms of CPU and memory.
They must only be used when they are indispensable and should be limited to the CSS properties opacity and transform with it’s associated functions : translate, rotate and scale.
You can also inform the navigator of upcoming changes with the will-change instruction for more optimization.
Examples of non compliant code for this rule:
<div style={{ border: "1px solid black", transition: "border 2s ease" }}/>Examples of compliant code for this rule:
<div style={{ border: "1px solid black" }}/>This recommendation is made by the CNUMR: Avoid JavaScript / CSS animations