box-shadow without crippling performancebox-shadow propertyAnimating 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 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.