Cómo solucionar el retraso de la animación en CSS
1. Intente utilizar transformaciones para la animación y evite usar alto, ancho, margen, relleno, etc.;
Razón:
Por definición, la propiedad de transformación de CSS no cambia el diseño de un elemento o los elementos que lo rodean. La propiedad de transformación afecta a todo el elemento; escala, rota y mueve todo el elemento.
¡Esta es una gran noticia para los navegadores! El navegador genera el mapa de bits del elemento solo una vez y lo envía a la GPU para su procesamiento cuando comienza la animación. A partir de entonces, el navegador no necesita realizar más diseños, dibujos o envíos del mapa de bits. Por lo tanto, el navegador puede aprovechar la GPU y dibujar rápidamente el mapa de bits en diferentes posiciones, rotarlo o escalarlo.
Razón de la velocidad más lenta:
Dado que el navegador realizará el diseño, dibujará y enviará el nuevo mapa de bits a la GPU en cada cuadro de la animación, sabemos que el mapa de bits se estará cargando. Los gráficos en la memoria de la GPU son una operación relativamente lenta.
La razón por la que el navegador tiene que trabajar tanto es porque el contenido de los elementos cambia constantemente en cada cuadro. Cambiar la altura de un elemento puede resultar en la necesidad de sincronizar los tamaños de sus hijos, por lo que el navegador debe recalcular el diseño. Una vez completado el diseño, el hilo principal debe regenerar nuevamente el mapa de bits del elemento.
2. Para requisitos más altos, puede habilitar el navegador para habilitar la aceleración de hardware de GPU.
Por ejemplo:
Ahora, Chrome, Firefox, Safari, IE9+ y la última versión de Opera admiten la aceleración de hardware cuando detectan que se han aplicado elementos DOM en la página. cierto Cuando se aplican estas reglas CSS, se activará la aceleración de hardware, cuya característica más importante es la transformación 3D de elementos.
.cube {
-webkit-transform: traducir3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);}II. Pero en algunos casos, no necesitamos realizar una transformación tridimensional de elementos, entonces, ¿qué debemos hacer? En este momento podemos utilizar un pequeño truco para "engañar" al navegador para que habilite la aceleración por hardware.
Si bien es posible que no queramos aplicar una transformación 3D a un elemento, aún podemos activar el motor 3D. Por ejemplo, podemos usar transform: TranslateZ(0); para habilitar la aceleración de hardware.
.cube {
webkit-transform: traducirZ(0);
-moz-transform: traducirZ(0); -ms-transform: traducirZ(0);
-o-transform: traducirZ(0);
transformar: traducirZ(0); /* Otras propiedades de transformación aquí* /} .
En Chrome y Safari, cuando usamos transformaciones o animaciones CSS, el siguiente código puede resolver este problema:
.cube {
-webkit-backface-visibility: oculto
-moz-backface-visibility: oculto
-wbkit-backface-visibility: oculto
-wbkit-backface-visibility: oculto
-moz-backface-visibility: oculto; /* Otras propiedades de transformación*/}
-ms-backface-visibility: oculto
backface-visibility: oculto
-webkit-perspectiva: 1000;
-moz-perspectiva.1000;
-ms-perspectiva: 1000;
perspectiva: 1000 ; /* Otras propiedades de transformación aquí*/}