Animations That Do Not Tank Your Lighthouse Score

Animations sell quality. Bad animations destroy quality. Here is the line.

Animate transform & opacity, never layout

If your animation triggers reflow, it is the wrong animation. Period.

Pre-warm with will-change — sparingly

will-change has a memory cost. Add it on hover-prepare, remove on animation end.

Respect prefers-reduced-motion

Always. It is one media query. Your users with vestibular conditions will thank you.

Test on mid-range Android

If it does not feel good on a 4-year-old Android, it is not done yet.