Mejorar el rendimiento de transición de CSS3

¿ Alguien tiene trucos o consejos para mejorar la suavidad de la animación CSS3? Estoy deslizando toda la página a la izquierda usando una transición CSS y es un poco más juttery de lo que me gustaría. Es un solo elemento, pero contiene numerosas esquinas redondeadas, degradados, sombras paralelas, etc., ya que es una página complicada.

En flash actionscript, hay una propiedad útil cacheAsBitmap que convierte el elemento de animación en un mapa de bits antes de que comience la animación. Esto es un regalo del cielo y acelera significativamente ciertos tipos de animación. ¿Hay algo como esto para CSS? ¿Hay algún otro consejo para mejorar el rendimiento sin simplificar el diseño de la página? Estoy pensando en cosas como habilitar la aceleración de hardware o marcar la animación como alta prioridad para el navegador.

Author: cronoklee, 2012-09-28
Source

4 answers

Antes de la directiva will-change , no se podía hacer esto de la misma manera literal que se puede hacer en otros idiomas. El navegador (o al menos Webkit) se ocupaba de representar la página dibujando varias capas. En teoría debería ser lo suficientemente inteligente como para resolver las capas por ti, pero a veces era una buena idea forzar algo en su propia capa.

A veces eso funcionó, a veces no, dependiendo exactamente de lo que está pasando.

De todos modos.

En CSS, una forma forzar algo en una capa es transformarlo usando una transformación 3D. Una estrategia común es añadir:

transform: translateZ(0);

O su equivalente: 

transform: translate3d(0,0,0);

O el un poco loco: 

transform: rotateZ(360deg);

O los traducidos combinados con: 

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Si las cosas son parpadeantes.

Estos crean una nueva capa, ya que eso es lo que define la especificación. De http://www.w3.org/TR/css3-transforms/#transform-property ,

"Cualquier valor que no sea 'none' para la transformación resultados en la creación de un contexto apilable y un bloque contenedor."

Todos estos necesitan pruebas cuidadosas, y no son algo que solo siempre se bung en cualquier cosa que pueda necesitarlo – a veces es mejor, a veces no es diferente, y a veces es peor!

¡Buena suerte!

 27
Author: Rich Bradshaw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:02

Desde

  • Cromo 36
  • Firefox 38
  • Opera 30
  • Navegador Android 40
  • Chrome para Android 42

Usted puede utilizar will-change para informar al navegador para prepararse para los elementos de aceleración de hardware.

.drawer {
    will-change: transform;
}

La propiedad will-change le permite informar al navegador antes de tiempo de qué tipos de cambios es probable que haga a un elemento, por lo que que puede configurar las optimizaciones adecuadas antes de que necesario, por lo tanto, evitar un costo de puesta en marcha no trivial que puede tener un efecto negativo en la capacidad de respuesta de una página. Los elementos pueden ser cambiado y renderizado más rápido, y la página será capaz de actualizar snappily, lo que resulta en una experiencia más suave.

Para más información, puede leer el artículo completo de esa cita.

 21
Author: Marc Dingena,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-21 12:20:27

Por lo que he leído, las sombras son uno de los mayores éxitos de rendimiento en este momento. Puedes intentar agregar / eliminar una clase al inicio / final de la animación para desactivar todas las sombras por un momento, y desvanecerlas de nuevo después de los movimientos.

 5
Author: Brian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-28 16:01:46

Desafortunadamente esto está limitado por una serie de cosas, muchas de las cuales no puedes controlar:

  • Rendimiento del navegador: todos los navegadores se comportan de manera diferente con CSS3 y Javascript. He encontrado Safari para estar entre los mejores (sorprendentemente?) en términos de rendimiento de renderizado CSS3, con Chrome en segundo lugar y Firefox en 3rd.
  • Rendimiento de la GPU: algunos navegadores ahora descargan las operaciones de animación y transición a la GPU, en cuyo caso la velocidad / rendimiento está limitado por la GPU. Si eres en una GPU Intel integrada, no es probable que sea muy suave en comparación con una tarjeta gráfica NVIDIA o AMD discreta.
  • Rendimiento de la CPU: Para situaciones en las que los navegadores NO se descargan a la GPU, se utiliza la CPU, en cuyo caso la CPU se convierte en el cuello de botella.
  • Número de otras pestañas / ventanas abiertas - muchos navegadores comparten procesos a través de pestañas, y otras animaciones u operaciones que consumen la CPU que ocurren en otras pestañas / navegadores podrían crear degredación del rendimiento.

El mejor la manera de mejorar el rendimiento actualmente es limitar el número de cosas que se están animando / transicionando a la vez.

 5
Author: Joshua,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-28 16:04:42