He hecho algunos proyectos con transiciones CSS3 y repliegue de Jquery .animate() cuando CSS3 no es compatible.
tengo tres equipos de prueba, además de mi propia:
- un 6+ años portátil (correr XP, Athlon 1800+ y 768Mo de Ram)
- un ordenador portátil 3 años (que se ejecuta es malísima Vista y una CPU de doble núcleo de Intel con 2Go de Ram)
- un escritorio Franken (unos pocos SO instalado con un P4 y 1Gb de RAM)
Lo que he observado es que la mayoría de las veces, CSS3 tiene un mejor rendimiento.
Lo que quiero decir con "funciona mejor" es solo que "se siente mejor": no intenté comparar los perfs, ni aplicar un método de prueba científica, y mi observación no debe tomarse por más que un empírico sensación. También tenga en cuenta que utilizo principalmente las transiciones CSS3 y no las animaciones CSS3 (es decir, con fotogramas clave).
Sin embargo, "mejor" no significa aquí "siempre es bueno". En las computadoras más antiguas, Javascript y CSS3 son igualmente laggy. Si su sitio es pesado en JS o CSS3, los IE anteriores a la versión 9 son siempre una experiencia pobre, los IE anteriores a la versión 8 siempre son una verdadera pesadilla. Firefox antes de v4 es mejor pero más que perfecto en computadoras antiguas.
En todos los casos, CSS3 debe aplicarse correctamente: por ejemplo, encontré que se descolora un div a la opacidad: 0 sin configuración: ninguno cuando termina es siempre una mala idea ... La transición a CSS3 es bastante nueva y no hay mejores prácticas reales existe, es prueba y error por ahora.
En dispositivos móviles modernos (poseo algunos dispositivos IOS, Android y BBOS), el CSS3 siempre es mucho mejor que Javascript: en un iPad 1, un simple $ ('img'). FadeOut() puede ser bastante feo cuando la transición de CSS3 está limpia.
Por lo tanto, para concluir, mi personal (y limitado) experiencia dice:
- CSS3 es a menudo mejor que Js, especialmente para dispositivos móviles modernos
- aunque ambos son malos en los equipos pobres/navegador combinación cuando se usa en exceso
- como de costumbre, depende de sus usuarios. Si tienen Macbooks de última generación, puedes usar mucha animación sin miedo. Si no están bien equipados, las animaciones podrían obstaculizar seriamente su experiencia de navegación.
- Creo que lo mejor es hacer las transiciones CSS3 con un repliegue Jquery si no se admite, y mantener 'em sencilla (es decir, no la animación de cuatro propiedades en tres elementos diferentes a la vez)
espero que ayude.
Dudo que algunas animaciones CSS3 sean "más pesadas" en GPU que cualquier juego de PC desde 1999. las matemáticas son súper simples en comparación con los juegos de cosas locas que se requerían hace 10 años, de modo que, de hecho, el problema de la velocidad es solo la implementación del navegador con CSS-> GPU. pero solo estoy adivinando. – vsync
Es cierto. Pero supongo que se trata de la cantidad de "poder" que un navegador debería poder alejarse del dispositivo.Imagine que el navegador debe usar toda su GPU como si fuera un juego, y luego piense en las personas que usan o abusan de esta. Así que con suerte los navegadores mejoran al manejar el uso de la GPU, pero supongo que hay una razón por la que las animaciones/desvanecimientos simples son tan exigentes. –