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

A continuación se muestra una forma sencilla de solucionar el problema anterior. Si desea lograr un redibujado mínimo, debe crear un elemento ficticio y animar su elemento de opacidad para que simule el mismo efecto que un objeto en movimiento animado a 60 fotogramas por segundo.

Ejemplo

Mira atentamente este ejemplo y compara las diferentes técnicas que utilizamos en él. ¿Dirías que estos dos efectos se ven iguales? La única diferencia es cómo aplicamos sombras y animaciones. En el ejemplo de la izquierda, aplicamos un efecto de animación a la sombra del cuadro cuando pasamos el cursor. En el ejemplo de la derecha, agregamos un elemento ficticio con ::after, le asignamos una sombra y animamos el elemento de opacidad del elemento.

Si pruebas uno de ellos con las herramientas de desarrollo, deberías ver algo como esto (la barra verde significa que se ha dibujado, cuanto menos mejor):

Cuando pasas el cursor over Notarás muchos más redibujos al pasar el cursor sobre la tarjeta de la izquierda (que anima la sombra del cuadro) y la tarjeta de la derecha (que anima la opacidad de su pseudoelemento).

¿Por qué vemos este efecto? Hay varias propiedades CSS, a saber, opacidad y transformación, que no activan un redibujado continuo en cada cuadro al realizar animaciones. 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, esta es la principal diferencia entre las dos técnicas:

/*La forma lenta*/

. Tómate tu tiempo {

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

Transición: box-shadow 0.3s se desvanece:

}

/*Pase el mouse para lograr una transición de sombra más grande*/

. Tómate tu tiempo: desplaza el cursor{

box-shadow:0 5px 15px rgba(0, 0, 0, 0.3); /

. Crea rápidamente {

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

}

/*Establece una sombra más grande y ocultarlo*/

. Hecho rápido::Después{

box-shadow:0 5px 15px rgba(0, 0, 0, 0.3);

Opacidad:

Transición; : Opacidad 0.3s se desvanece:

}

/*Realiza la visualización de transición de una sombra más grande cuando el mouse está sobre el cursor*/

. Producción rápida:hover::después {

Opacidad:1;

}