How to animate box-shadow without crippling performance

Back to blog post

Don't: Animate the box-shadow property

Hover the cards

Animating a changed box-shadow (in this case from box-shadow: 0 1px 2px rgba(0,0,0,0.15) to box-shadow: 0 5px 15px rgba(0,0,0,0.3) causes a re-paint on every frame.

Your desktop likely handles it without any issues, but your phone may not, and even your desktop may suffer when animating a more complex layout.

Do: Animate a pseudo-element

Hover the cards

We can minimize the amount of repaints by inserting a pseudo-element with :after, adding a shadow to that element, and then animating the opacity of the pseudo-element on hover.

Changes to both the transform and opacity properties are hardware accelerated, and we can achieve better performance when sticking to only changing these properties in animations.