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.