will-change
tl;dr: Use the will-change
CSS property to hint the rendering engine to optimize animations. Avoid the transform: translate3d(0, 0, 0);
trick.
Use will-change: transform;
to inform the browser that an element will undergo a transformation. Other possible values include opacity
and others.
Also, please respect the OS setting to reduce animations. On Windows 11, this setting can be found at Settings > Accessibility > Visual Effects > Animation Effects. On Mac OS, this setting can be found at System Preferences > Accessibility > Display > Reduce Motion.
@media (prefers-reduced-motion: reduce) {
* { transition: none; }
}
Opera has a good article on the best practices of using will-change
.