Learn how to improve the performance of a box-shadow transition by moving the box-shadow to a pseudo-element. You can make it either slower or faster.
Adding a CSS transition to animate the box-shadow of an element is a handy trick.
It’s a design technique that’s often used on hover to highlight something. If you’ve used this effect you might have noticed that sometimes the performance can be suboptimal making the animation slow.
One trick you can try to improve the performance is moving the box-shadow to a pseudo-element .
Direct transition of the box-shadow property:
Pre-render the hover state of the box-shadow with a pseudo-element and hide it by setting the opacity: 0:
Apply the transition with the opacity property:
That’s it!
