Cómo hacer un buen uso de las animaciones CSS3: tutorial, códigos de ejemplo y ejemplos

Artículo escrito por:
  • Diseño de páginas Web
  • Actualizado: Ago 28, 2013

Cuando usamos JS y jQuery tenemos control total sobre las animaciones y podemos crear algunos efectos impresionantes, pero el precio es bastante alto. El tiempo de procesamiento, la compatibilidad entre navegadores (los dispositivos móviles, por ejemplo, son bastante diferentes cuando se trata de JS) y la complejidad del código en sí son puntos que debemos tener en cuenta al crear interfaces animadas.

Entonces, hoy veremos cómo evitar JS mediante el uso de animaciones y transiciones de CSS. Discutiremos desde los pasos muy básicos hasta algunos efectos impresionantes, como paneles de acordeón y submenús animados.

Toma asiento, tu bloc de notas y un navegador real (todo lo que no sea IE) y comencemos.

Calentando

Tenemos bastantes ventajas (y desventajas como todo en nuestras vidas) en el uso de animaciones CSS. Si necesita venderlos a su jefe o cliente, esto es lo que debe tener en cuenta:

  • Son potencialmente más rápidos, ya que pueden hacer uso de la aceleración de hardware (como implementaciones de HTML5)
  • Se desempeñarán mejor en dispositivos móviles y no necesitarán un código específico para rastrear eventos táctiles
  • JS debe ser interpretado por el navegador y las posibilidades de romper el navegador son mucho mayores. Entonces, cuando CSS falla, falla silenciosamente mientras JS puede romper toda la página
  • Tienen un soporte de navegador bastante bueno (este sitio te ayudará a verificar estadísticas específicas sobre eso: http://caniuse.com/#search )

Ejemplos de animaciones CSS3

Antes de comenzar con el contenido de esta publicación, veamos algunas hermosas animaciones hechas en CSS puro.

Pure CSS Twitter Fail Whale

Ballena fallida animada

Hecho por Steven Dennis, Mira esto en acción.

Pure CSS Scrolling Coke Can
Ejemplos de animación de CSS 3: Desplazamiento de lata de coque

Hecho por las Cortes romanas, Mira esto en acción.

Pure CSS Walking Man

Ejemplos de animación de CSS 3: El hombre que camina

Hecho por Andrew Hoyer, Mira esto en acción.

Ensuciarse las manos

Vamos a empezar el código. Usaremos mucho las pseudo clases de CSS para activar la animación. Para ser honesto, muchos desarrolladores recomiendan que uses JS para activar y desactivar las animaciones, pero aquí veremos la forma más fácil:

#test {background: red; } #test: hover {background: green; } # prueba: activa {fondo: azul; } # prueba: objetivo {fondo: negro; }

Tenemos algunas otras pseudo-clases para usar, ¡pero tienes la idea! Entonces, esto es lo que sucede si hace clic en el elemento #test (asumiendo que es un enlace):

  • Estado normal: el fondo será rojo
  • Desplazar: cuando el mouse ingrese al área del elemento tendrá un fondo verde
  • Activo: cuando hace clic en el cursor y mientras el botón del mouse aún está presionado, el color de fondo será azul
  • Objetivo: cuando la página actual tenga el #test en la URL, este elemento será negro

Cada uno de estos puede usarse para animaciones CSS, por ejemplo, puede crear enlaces 2 para activar y desactivar la animación CSS haciendo uso del pseudoelemento objetivo con este código:

<a href='#test'> activar </a> <a href='#'> desactivar </a>

Transiciones CSS

La transición de CSS cambiará del estado inicial al final sin problemas. Entonces, en el selector principal, utilizando la propiedad "transición", definirá el tiempo y cada propiedad que se verá afectada y cómo debería ser la animación. Veamos un ejemplo:

.test {/ * función de temporización de la duración de las propiedades de transición, * / color: azul; transición: color 2s, tamaño de fuente 2s easy-out; } .test: hover {color: rojo; } .test: active {font-size: 200%; }

Cuando pasas el elemento .test cambiará gradualmente el color del azul al rojo (¿qué bonita paleta, eh?). Al hacer clic en el elemento, el tamaño de la fuente aumentará gradualmente a 200% del tamaño de fuente predeterminado.

También tenemos la propiedad de "tiempo de transición", establecida como facilidad, que se utilizará el "tiempo" disponible para la animación. Aquí están los valores posibles:

  • Lineal: Misma velocidad desde el principio hasta el final.
  • Facilidad en el inicio lento
  • Facilidad de salida: final lento
  • Facilidad: inicio lento, rápido en el medio, luego final lento
  • Facilidad de entrada: inicio lento, final lento
  • Cubic-bezier (a, b, c, d): velocidad personalizada

La función Bezier cúbica creará una animación personalizada con números 4 que varía de 0 a 1, representando la curva matemática para la duración de la velocidad de animación X.

Para una mejor compatibilidad del navegador, debe considerar el uso de los prefijos de proveedores para Opera, Firefox y webkit de la siguiente manera:

div {ancho: 400px; -o-transición: ancho 2s; -moz-transición: ancho 2s; -webkit-transición: ancho 2s; transición: ancho 2s; }

Además, podría hacer uso de las consultas de medios para definir diferentes transiciones dependiendo del ancho del navegador (dispositivos móviles, tabletas). Este es un ejemplo simple:

body {font-size: 1em; } @media screen y (max-width: 800px) {body {font-size: 0.8em; }} @media screen y (max-width: 400px) {body {Tamaño de fuente: 0.7em; }}

Aquí, el tamaño de la fuente cambiará repentinamente cuando aumente el ancho del navegador. Este código evitará que eso suceda, dando una transición mucho más suave:

cuerpo {-o-transición: tamaño de fuente .5s linear; -mocz transición: tamaño de fuente .5s linear; -webkit-transition: tamaño de fuente .5s linear; transición: tamaño de fuente .5s linear; }

También puede usar esto si tiene diferentes pantallas o tamaños para retrato / retrato, si desea cambiar anchos, colores, rellenos, visualización de menú.

Animación CSS - El verdadero comienzo de la diversión

La animación es una secuencia de transiciones definidas en un solo selector. Para definir animaciones CSS, deberá seguir los pasos de 2.

La regla @keyframe se usa para definir una secuencia de pasos de animación, y se define por un nombre único y los estilos que describen cómo funciona esta animación. Como de costumbre, necesitaremos algunos prefijos de proveedores, como en este ejemplo:

/ * el mismo código para cada proveedor * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * nombre de la animación * / @keyframe my-animation {/ * selector de cuadro * / 0% {/ * estilo de cuadro * / Izquierda: 0px; Arriba: 0px; } 25% {Izquierda: 200px; Arriba: 0px; } 50% {Izquierda: 200px; Arriba: 200px; } 75% {Izquierda: 0px; Arriba: 200px; } 100% {Izquierda: 0px; Arriba: 0px; }}

Por lo tanto, cada estilo se define por el marco / período de tiempo (como los marcos de una animación flash) como un porcentaje y los estilos que deben aplicarse allí. Este fotograma clave, por ejemplo, dice que el elemento se moverá hacia la izquierda, luego hacia arriba, luego hacia la derecha y luego hacia abajo.

Después de haber seguido el paso 1 y haber creado su fotograma clave, puede aplicarlo a un elemento. Luego usaremos casi la misma lógica que hemos hecho con la transición de CSS, la diferencia es que ahora nuestra "transición" es una animación mucho más compleja.

Para aplicarlo usaremos la propiedad de animación y tiene sub-propiedades 7:

  • Nombre: ese identificador único
  • Duración: ¿Cuánto tiempo tomará de 0% a 100%?
  • Función de temporización: más o menos la misma que la función de temporización de transición
  • Retraso: ¿Cuánto tiempo llevará iniciar el 0%?
  • Recuento de iteraciones: cuántas repeticiones tendremos ("infinito" para un bucle infinito)
  • Dirección: normal o alterna (reversa)
  • Estado de reproducción: si la animación se está ejecutando o está en pausa

Esto aplicará nuestra animación al elemento #test cuando sea el objetivo de la página:

#test: target {/ * nombre-animación | duración | función de temporización | retraso | recuento de iteraciones | dirección | play-state * / animation: my-animation 10s linear 0s funcionamiento normal infinito; }

Con esto en mente, podemos crear algunos ejemplos impresionantes.

CSS Sólo Acordeón

Crearemos paneles plegables haciendo uso de las animaciones CSS. Aquí está la estructura básica de HTML:

<div class = "accordion"> <a href="#tab1"> Tab 1 </a> <div id = "tab1"> <p> TEXT 1 </p> </div> <a href = "# tab2 "> Tab 2 </a> <div id =" tab2 "> <p> TEXT 2 </p> </div> <a href="#tab3"> Tab 3 </a> <div id =" tab3 "> <p> TEXT 3 </p> </div> </div>

Esto solo creará los paneles y el enlace que activará cada uno de ellos. Y aquí es donde ocurre la magia:

/ * cualquier div que esté dentro del acordeón * / .accordion div {/ * está oculto por defecto * / altura: 0; desbordamiento: oculto; / * la magia negra * / transición: altura 1s; } / * cuando el div mencionado es el objetivo * / .accordion div: target {/ * height: auto no funcionará, pero esto funcionará bien * / height: 80px; }

Bastante simple, ¿eh? ¿Y has pasado toda tu vida usando JS para esto? :)

Menú Solo CSS con Submenús

Y esta es otra aplicación bastante simple. Sin duda, tiene un menú de navegación en su sitio y, a menudo, necesitamos usar algunos submenús allí. La mejor manera de mostrar y ocultar elementos es usar jQuery, ¿verdad? Bueno, piénsalo de nuevo después de probar este código:

<nav> <ul> <li> <a href='#item1'> Item 1 </a> <div> <ul> <li> <a href='#item11'> Item 1.1 </a> </ li> <li> <a href='#item12'> Artículo 1.2 </a> </li> </ul></div> </li> <li> <a href='#item2'> Artículo 2 </a> <div> <ul> <li> <a href='#item21'> Artículo 2.1 </a> </li> <li> <a href='#item22'> Artículo 2.2 </a> </li> </ul></div> </li> </ul> </nav>

Y la magia comienza aquí:

a {/ * haciendo que los enlaces sean un poco mejores * / display: block; relleno: 4px; } nav {text-align: center; } / * cualquier menú (incluido el principal) * / nav ul {display: inline-block; estilo de lista: ninguno; } nav> ul> li {/ * elementos horizontales (la vertical también funcionará bien) * / float: left; } nav li div {/ * colapsando cualquier submenú * / altura: 0; desbordamiento: oculto; / * Sentimientos de Houdini * / transición: altura 1s; } nav li: hover> div {altura: 56px; }

Recapitulación

Esto es ciertamente solo una guía para comenzar. Hay muchos otros efectos geniales que se pueden hacer usando animaciones solo de CSS y muchas cosas por venir.

Entonces, ¿has usado esto antes? ¿Puedes pensar en otra buena aplicación para animaciones CSS? Comparte tus pensamientos usando los comentarios!

Acerca de Rochester Oliveira

Soy un diseñador web y empresario de Itajubá (MG), Brasil. Me encanta escribir sobre temas oscuros y hacer cosas interesantes.