Share
La animación CSS3 es bastante buena. Nos permite dar vida acelerada al hardware a nuestros sitios web previamente aburridos. Sin embargo, hay algunos errores y prácticas importantes que debe tener en cuenta..
El soporte del navegador para la animación CSS3 está aumentando: Mozilla Firefox se ha unido a WebKit con soporte completo, e Internet Explorer 10, así como Opera 12, han prometido soporte futuro. Esto significa que podemos empezar a usarlos sin miedo. hoy. Sin embargo, este apoyo próspero no viene sin sus problemas..
Al ser una propiedad nacida y criada por Webkit, es de esperar que la animación CSS tenga soporte completo en todos los navegadores Webkit. Desafortunadamente, no es tan simple. El navegador integrado en los dispositivos Android. hace animaciones de apoyo - hasta cierto punto. El problema es que solo admitirá animaciones con una sola propiedad cambiante..
Así que digamos que queríamos trabajar con mi marco de animaciones, Animate.css, para hacer un sitio web super cool. La mayoría de las animaciones, como bounceInLeft, funcionarán muy bien en los últimos Chrome, Safari, Firefox y iOS Safari. Pero en un dispositivo Android, el usuario no verá un solo elemento animado. La animación se ejecuta, pero el elemento desaparece tan pronto como se termina..
Esta extraña peculiaridad significa que las únicas animaciones que podemos ejecutar en dispositivos Android son de propiedades únicas, como fadeIn y bounce. Desafortunadamente, no está claro si Android 4.0 proporcionará un mejor soporte, ojalá lo haga..
Hasta que veamos un mayor soporte de estos dispositivos Android, lo mejor que puede hacer es proporcionar correcciones de Javascript o animaciones menos complejas. Pero, ¿cómo puede decirle a su sitio que no use sus animaciones geniales en estos dispositivos? El uso de Modernizr no ayudará en este caso, ya que detectará que el navegador admite animaciones. Afortunadamente, podemos verificar el agente de usuario y presentar una hoja de estilo o script alternativo. En PHP, es tan fácil como esto:
$ ua = strtolower ($ _ SERVER ['HTTP_USER_AGENT']); if (stripos ($ ua, 'android')! == false) // && stripos ($ ua, 'mobile')! == false) $ css = "droid-style.css"; else $ css = "style.css";
Ese fragmento se cargará droid-style.css en dispositivos Android, lo que significa que podemos mantener nuestras animaciones de pantalón de fantasía para los navegadores que pueden usarlas. Excelente!
Los dispositivos iOS como iPhone y iPad tienen un gran soporte para las animaciones CSS3, con una aceleración total del hardware, pero solo si es una transformación 3D. Si la animación no implica una transformación 3D, será acelerada únicamente por el software, lo que puede resultar en animaciones retrasadas..
Para obtener la aceleración total del hardware en las animaciones, debe activar el motor de renderizado 3D. Eso es tan fácil como agregar esta regla a tu CSS:
.contenedor -webkit-transform: translateZ (0);
¡Genial! Pero ¿por qué no aplicar esta regla a la cuerpo? Bueno, por alguna razón, la activación del motor 3D juega un poco con el diseño de la página. Los elementos fijos o en posición absoluta cambiarán ligeramente con esto aplicado al cuerpo.
Al igual que con todas las cosas en el mundo CSS3, este truco inteligente tiene un costo. No uno fuerte, pero un costo no obstante. Echa un vistazo a esta comparación científica:
Se necesita un ojo para verlo, pero la activación del motor de renderizado 3D hace que el antialiasing del texto esté en escala de grises, lo que resulta en un texto ligeramente más nítido, y es particularmente notable en tamaños de texto extremadamente pequeños o extremadamente grandes. Como dije, no es gran cosa, pero sigue siendo un error. Añadiendo -webkit-font-smoothing: antialiased; puede ayudar a reducir el problema ligeramente en los navegadores Webkit.
Imaginemos que necesita mover un elemento de un lugar a otro, sin que esto afecte el diseño de la página.. traducir es tu mejor amigo aquí: la propiedad de traducción, según lo define el W3C:
... no afecta el flujo del contenido que rodea al elemento transformado. Sin embargo, el valor del área de desbordamiento tiene en cuenta los elementos transformados.
¿Mira eso? No afecta el flujo de contenido circundante. Pero hace afectar el desbordamiento del documento. Esto significa que si mueves un elemento fuera de la página (lo cual es el caso de algunas animaciones en Animate.css), causará barras de desplazamiento.
Los navegadores tratan este comportamiento un poco diferente entre ellos. Safari y Chrome crearán barras de desplazamiento, pero luego, una vez que se complete la transformación y la opacidad del elemento caiga a cero, eliminará las barras de desplazamiento, como si se hubiera eliminado el elemento. Firefox, por otro lado, crea barras de desplazamiento persistentes que permanecerán hasta que el elemento se elimine del documento o se establezca en pantalla: ninguna. La mejor manera de trabajar con estas transformaciones es usar un poco de magia Javascript. Si conoce la duración de su animación, debe eliminar el elemento del DOM una vez que haya terminado la animación. Alternativamente, puedes estar atento a cuándo se completa la animación con un Javascript inteligente:
Accentsconagua
var element = document.getElementById ("# box"); element.addEventListener ("webkitAnimationEnd", function () this.style.webkitAnimationName = "";, false); document.getElementById ("# button"). onclick = function () element.style.webkitAnimationName = "shake"; // probablemente querrás prevenirDefault aquí. ; Este pequeño fragmento en realidad proviene de un hilo de desbordamiento de pila. Es una buena, así que márcala!
Si está escribiendo su propia animación CSS, es posible que note algo extraño en los dispositivos Safari, Chrome e iOS. Justo antes de que se ejecute la animación, el elemento animado en cuestión parpadeará dentro y fuera de la visibilidad justo antes de que comience.
La razón detrás de este fenómeno no está clara, pero la solución es bastante simple. Simplemente agregando el -webkit-backface-visibilidad: oculto; Reglas a tu CSS deberían ayudar a prevenir el problema. Aplícalo al contenedor del elemento, así:
.contenedor -webkit-backface-visible: oculto;
Se reduce a otro problema de aceleración de hardware: el uso de esta propiedad simplemente activa la aceleración. También podrías usar cosas como -webkit-perspectiva: 1000; u otras propiedades 3D.
Aquí hay otro par de verdades desafortunadas con animaciones y transiciones CSS.. No puedes usar animaciones o transiciones en pseudo elementos. Este hecho está poco documentado en la web, pero es importante. Digamos, por ejemplo, que querías una :después pseudoelemento para convertirse en visibilidad cuando se desplaza sobre su padre. Desafortunadamente, se ajustará entre los estados en lugar de hacer la transición con gracia. Por lo que sabemos, este es un comportamiento inusual: hay informes de errores archivados para Chrome y Webkit, y Firefox en realidad admite estas transiciones. Puede mantenerse al día con el estado actual de soporte para transiciones y animaciones en pseudo elementos en CSS-tricks.
Sin embargo, vale la pena señalar que si aplica transiciones o animaciones a un elemento que tiene pseudo elementos, esas transiciones se llevarán a los pseudo elementos..
Y ahora por otra patada en los dientes.. Las transiciones y animaciones restablecen el índice z de un objeto. Si tiene algunos objetos bien apilados que desea animar, se restablecerá su orden de apilamiento. Es una verdad desafortunada y, de nuevo, no es una de las que mucha gente habla..
Puede que me esté metiendo en aguas bastante profundas aquí, pero puede hacer que sus animaciones sean mucho más realistas jugando con las funciones de temporización. Si solo dejas las funciones de tiempo predeterminadas para las animaciones (facilidad), puedes terminar con algunos efectos bastante bonitos. Sin embargo, si está intentando recrear un patrón de movimiento particular en CSS, es importante aprender las diferencias entre las diferentes funciones de tiempo. Tomemos como ejemplo la animación de 'bisagra' de Animate.css.
La idea detrás de esta animación era hacer que el elemento cayera de su posición actual, oscilar desde una sola esquina por un rato, luego dejarlo completamente, como una señal rota. Aquí está el truco: la animación requerirá una variedad de funciones de temporización para que sea realista. Piensa en este movimiento en la vida real; cuando el letrero cae y comienza a moverse, comenzará lentamente, luego se acelerará y luego volverá a bajar al máximo. Sin embargo, cuando se cae completamente, debería caer repentinamente y acelerar a medida que cae. Suena como que necesitamos ambos facilidad de entrada y facilidad en.
En realidad es bastante fácil. Dentro de sus fotogramas clave, puede declarar las diferentes funciones de temporización, como esta:
@keyframes bisagra 0% animación-tiempo-función: facilidad de entrada; transformar: rotar (-120deg); origen de transformación: arriba a la izquierda; 25% animación-tiempo-función: facilidad de entrada; transformar: girar (70deg); origen de transformación: arriba a la izquierda; 50% animación-tiempo-función: facilidad de entrada; transformar: rotar (-120deg); origen de transformación: arriba a la izquierda; 100% animación-tiempo-función: facilidad de entrada; transformar: rotar (0deg) traducirY (200%);
Al usar una variedad de funciones de tiempo, en lugar de solo la predeterminada, tenemos un mayor control sobre cómo se reproduce la animación. Si ejecuta la animación de bisagra sin las funciones de temporización personalizadas, puede ver lo extraño que se ve. Cuando escriba sus animaciones, compárelas con las instancias de la vida real del mismo movimiento. Disminuya la velocidad en su mente y piense cómo se cronometra cada uno.
Esto podría ser lo más importante que quites, así que escucha. Creo firmemente que las animaciones de CSS están ahí para ser utilizadas con moderación para una mayor interacción, y nada más. Las personas inteligentes como Anthony Calzadilla están haciendo cosas increíbles y divertidas con las animaciones CSS, pero en mi opinión, en el mundo real estas animaciones deberían ser pocas y muy separadas..
Toma esta página como ejemplo. Todo aquí (excepto el gif animado obligatorio) se anima usando CSS. Es un ejemplo extremo, pero puedes ver por qué estoy preocupado por el uso excesivo de estas cosas.
Lo mismo ocurre con todas las propiedades CSS3. Las transiciones, las sombras y los gradientes se deben utilizar con sutileza. Creo que la página de destino de Owlr es un buen ejemplo. Enviar un correo electrónico no válido o un formulario vacío creará un error de validación con un par de animaciones no esenciales para llamar la atención.
En su libro CSS3 For Web Designers, (que es una gran lectura) Dan Cederholm habla mucho sobre la "capa de experiencia". Subraya que todos los valores de CSS3 que se muestran en su libro son solo para una capa adicional de experiencia; los efectos agregados no son esenciales, y siempre deben degradarse con gracia en los navegadores que no los admiten completamente. Recuerda esta regla y te volverás más poderoso de lo que puedas imaginar. O algo así.
La mayoría de las computadoras tienen la potencia más que suficiente para ejecutar animaciones y transiciones de CSS3 sin ningún problema. Sin embargo, cuanto más intentes bombear tu CSS, más afectará al rendimiento..
Tomemos por ejemplo una animación simple que mueve un div De izquierda a derecha infinitamente. Cosas simples. Hagamos este cuadro un poco más interesante: dale un cuadro sombreado, texto sombreado, tal vez un degradado ... todas estas reglas afectarán el rendimiento de la página. Si usted dio su div una sombra de caja con un radio de desenfoque ridículo (estoy hablando de cientos aquí), notará una caída severa en el rendimiento. El navegador está trabajando tan arduamente para descubrir cómo debe representar los píxeles que forman la sombra de la caja que comienza a acaparar los recursos que necesita la animación, o incluso el resto de la página; Mantenga las mejoras visuales al mínimo, particularmente las sombras.
La aceleración de hardware ayuda a prevenir este problema, pero todavía es un problema que debe tenerse en cuenta. No todos los usuarios tendrán el lujo de la aceleración de hardware, y los gráficos renderizados por software pueden hacer mella en la computadora.
Es de esperar que esté más al tanto de algunas de las fallas en la animación de CSS3 y de todas las peculiaridades de su navegador que antes. Pero no olvide que estas características de CSS3 son todavía muy interesantes y están disponibles para su uso en la actualidad. El soporte es cada vez mayor, y señala un mundo donde podemos alejarnos de Javascript para efectos visuales, lo cual es una gran cosa si me preguntas.
Terminaré con este simple recordatorio:
“Su contenido y funcionalidad tienen prioridad sobre todo lo demás. Si te encuentras con alguna característica de CSS3, asegúrate de que tu sitio funcionará de la misma manera para todos los usuarios sin ellos también ".
Si estás cansado de quitarte el pelo debido a los errores confusos, consulta Envato Studio, donde puedes pedir ayuda a los desarrolladores seleccionados a los que les encanta aplastar errores y hacer correcciones.!
