Cómo lograr un efecto de animación suave de "sombra de cuadro"

Prueba uno de estos usando las herramientas de desarrollo y deberías ver algo como esto (la barra verde significa que se ha dibujado, cuanto menos, mejor):

Cuando pasas el cursor Al comparar la tarjeta de la izquierda (animando la sombra del cuadro) con la tarjeta flotante de la derecha (animando la opacidad de su pseudoelemento), es obvio que hay más redibujos.

¿Por qué vemos este efecto? Hay pocas propiedades de CSS, a saber, opacidad y transformación, que cuando se animan, no activan un redibujado constante en cada fotograma. Es mejor que nos limitemos a cambiar sólo estas dos propiedades en las animaciones para minimizar el volver a dibujar (el trabajo que tiene que hacer su navegador).

Abandona otros estilos de diseño, estos son estos dos