Técnicas de animación CSS3 que necesitas saber

Traducción: tecnología de animación CSS3 que necesitas conocer

Traducido de: Lo que necesita saber sobre CSS conductual

¡Respete los derechos de autor e indique el enlace a este sitio al reimprimir!

Prefacio de traducción: este artículo está traducido de Smashingmagazine, pero el contenido del texto original es un poco superficial y no muy completo. La observación frontal agrega contenido cada vez más sistemático sobre la premisa de la traducción. Si hay alguna deficiencia, corríjala y agréguela.

A medida que la web evoluciona y los navegadores adquieren mayor capacidad para representar código más avanzado, estamos en camino de lograrlo en todas las plataformas y navegadores. No sólo podemos dedicar menos tiempo a asegurarnos de que nuestro modelo de caja se vea normal en IE6, sino que también crea una atmósfera que fomenta la innovación, evita hackeos y enfatiza los scripts de front-end.

Internet es un gran entorno y una comunidad colaborativa con una gran cantidad de conocimientos para compartir. Queríamos esquinas redondeadas y lo hicimos realidad; queríamos múltiples imágenes de fondo , y lo hicimos realidad; queríamos imágenes de bordes , y lo hicimos realidad; Por lo tanto, la demanda nunca es un problema; de lo contrario, es posible que todavía estemos usando tablas para diseñar páginas y usando demasiado código. Todos sabemos que Internet puede hacer cualquier cosa.

Nacido para Internet

Las propiedades de CSS 3 como border-radius , box-shadow y text-shadow están comenzando a ganar impulso en navegadores avanzados como webkit (Safari, Chrome, etc.) y Gecko (Firefox). Ellos (estas propiedades CSS) ya crean páginas más ligeras y experiencias más ricas para los usuarios, y se degradan con gracia. Sin embargo, estas son sólo algunas de las muchas cosas que CSS 3 puede hacer por nosotros.

En este artículo, iremos un paso más allá y veremos técnicas CSS3 más avanzadas, como transformaciones, transiciones y animaciones. Cubriremos el código en sí, la compatibilidad del navegador y algunos ejemplos que demuestran adecuadamente cómo estas nuevas propiedades pueden mejorar tanto su diseño como la experiencia general del usuario.

Transformación CSS

La transformación CSS es un borrador del W3C. Pero no me iluminó cuando me senté por primera vez a leer todas sus funciones y aprender algunas cosas. Como puede imaginar, este documento está escrito en términos técnicos y se centra más en matrices y elementos gráficos (es decir, trama) deformados. Al no haber tocado matrices desde que tomé el primer año de cálculo, tuve que hacer muchas pruebas de navegador y adivinar y verificar para este capítulo.

Después de leer todos los tutoriales que pude encontrar y muchas pruebas de navegador, obtuve información útil sobre las transformaciones de CSS de la que todos pueden beneficiarse.

transformar

El atributo de transformación implementa algunas de las mismas funciones que se pueden implementar con SVG. Se puede utilizar en elementos en línea y elementos de bloque. Nos permite rotar, escalar y mover elementos, con solo una línea de código CSS.

La mayor crítica a algunos diseños de vanguardia es que el texto no es seleccionable (hay que conseguirlo recortando imágenes). Cuando domine el uso del atributo de transformación para controlar el texto, esto ya no será un problema, porque es un método CSS puro, por lo que el texto dentro del elemento seguirá siendo opcional. Esta es una gran ventaja de CSS sobre el uso de imágenes (o imágenes de fondo).

Algunas funciones de transformación divertidas y útiles:

girar

Rotar le permite rotar un objeto pasando un valor en grados.

escala

La escala es una función de escala que puede agrandar cualquier elemento. Toma números positivos y negativos, así como decimales, como argumentos.

traducir

Traducir elementos de reposición basados ​​en coordenadas X e Y

sesgar

Como sugiere el nombre, sesgar es inclinar el objeto y el parámetro es el grado.

matriz

transform admite la transformación matricial, que consiste en reposicionar elementos en función de las coordenadas X e Y

Echemos un vistazo más profundo a cada característica.

Girar

El atributo de transformación tiene muchos usos, uno de los cuales es traducir (rotación). Translate gira un objeto según el ángulo y se puede utilizar para elementos en línea y elementos a nivel de bloque. Puede lograr efectos interesantes .

Tenga en cuenta que en IE8 (modo no estándar) es necesario escribir "-ms-filter" en lugar de "filter".

Soporte del navegador

La compatibilidad del navegador con la traducción es sorprendentemente amplia. En el fragmento de CSS anterior, simplemente agregamos los prefijos -webkit- y -moz- y rotamos el elemento #nav -90 grados.

Bastante simple, ¿verdad? El único problema es que, para un elemento de diseño bastante importante, si IE no lo admite, muchos diseñadores se mostrarán reacios a utilizarlo.

Afortunadamente, IE tiene un filtro para esto: el filtro de rotación de gráficos. Puede tener 4 valores de rotación: 0, 1, 2 y 3. No obtendrá el mismo control granular que Webkit y Gecko, pero al menos será algo consistente (incluso con IE6). Aunque este filtro solo admite 4 valores, lo que parece un poco inútil, para IE es mejor que nada.

escala

La escala no funciona como crees: simplemente reduce y amplía un elemento. La función de zoom toma valores tanto de ancho como de alto, que pueden ser positivos, negativos o decimales.

Los valores positivos amplían un elemento, como era de esperar, según el ancho y alto especificados.

Los valores negativos no reducen el elemento, sino que lo voltean (por ejemplo, el texto se invierte) y lo escalan en consecuencia. Sin embargo, puede reducir o reducir un elemento utilizando un número decimal menor que 1 (por ejemplo, .5).

Soporte del navegador

Actualmente, el atributo de escala solo es compatible con Firefox, Safari y Chrome, y hasta ahora ninguna versión de IE lo admite. Escalar un objeto es una elección de diseño bastante significativa. Se puede utilizar mediante una mejora progresiva: desplazar el cursor, lo que puede agregar un poco de interés a su navegación.