box-shadowwithout crippling performance
Back to blog post
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.
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
Changes to both the
opacity properties are hardware accelerated, and we can achieve better performance when sticking to only changing these properties in animations.