Archivos

Animaciones CSS3


Durante este último año hemos trabajado en varios proyectos y prototipos que requerían animaciones. En el 100% de los casos utilizábamos librerías Javascript hasta que en ciertos proyectos para los que no disponíamos de demasiado tiempo dimos con una solución más rápida y menos compleja para realizar dichas animaciones, por eso recurrimos a las animaciones CSS3 y algunas librerías que encontramos.Animaciones en CSS3

 

SOPORTE EN NAVEGADORES

Lo primero de todo, y muy a tener en cuenta, es comprobar si el navegador en el que vamos a reproducir estas animaciones las soporta. Hicimos varias pruebas en prototipos de app híbridas hechas con Phonegap y vimos que el rendimiento era el óptimo para su reproducción. De momento, la compatibilidad con navegadores de las animaciones CSS3 está soportada por los más modernos como Chrome, Safari, Firefox, etc. De las versiones antiguas de Internet Explorer ni hablamos.

Soporte en navegadores(Vía w3schools)

¿QUÉ SON Y QUÉ HACEN?

La definición de W3schools sobre las animaciones CSS3 es la siguiente:

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash.

Las animaciones CSS3 permiten animar la mayoría de los elementos HTML sin tener que utilizar javascript o Flash.

Estas animaciones constan de dos componentes: un estilo que describe la animación y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

PROPIEDADES DE LAS ANIMACIONES CSS3

@keyframes: Especifica el código de animación.

Animation: Establece todas las propiedades de animación.

Animation-delay: Define el retardo en segundos para el inicio de la animación.

Animation-direction: Es la dirección de la animación, especifica si una animación debe reproducirse en dirección inversa o en ciclos alternos.

Animation-duration: Determina cuántos segundos o milisegundos tarda una animación en completar un ciclo. Si queremos desactivar la animación, pondremos 0.

Animation-fill-mode: Especifica un estilo para el elemento cuando la animación no se ejecuta (cuando esté terminado, o cuando existe un retardo). Por ejemplo, si le indicamos forwards, mantendrá el estilo con el que ha terminado la animación.

Animation-iteration-count: Indica el número de veces que que deseamos que se reproduzca una animación, o que se reproduzca infinitamente.

Animation-name: Especifica el nombre de la animación.

Animation-play-state: Determina si la animación se está ejecutando o está en pausa.

Animation-timing-function: Define la curva de velocidad de la animación:

  • Linear: Mantiene la misma velocidad de principio a fin.
  • Ease: Comienza lento, despues rápido y final lento.
  • Ease-in: Comienza lento y después mantiene la velocidad.
  • Ease-out: Mantiene velocidad con un final lento.
  • Ease-in-out: Comienzo y fin lentos; muy similar a ease, sólo que este último empieza más rápido de lo que termina.
  • Cubic-bezier: Permite configurar la curva de velocidad a nuestro gusto utilizando la función cúbica de Bezier. Acepta cuatro valores entre 0 y 1.

Este sería el código de una animación:

div {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

¿QUÉ PERMITEN HACER?

Se puede hacer prácticamente de todo, eso ya depende de tu creatividad y tu tiempo. Nosotros os mostramos algunas de las librerías que hemos utilizado y que pueden servir de bastante ayuda a la hora de ganar ese tiempo del que nunca disponemos:

animate.css

CSS3 animation cheat sheet

Transit

Magic Animations

Rocket

Tampoco nos olvidamos de los generadores en línea para crear estas animaciones. Si no tienes tiempo y tu animación no es muy compleja puedes recurrir a estos generadores. Destacamos algunos con los que hemos trasteado:

CSS animate

CSS3 Maker

CSS3 gen

EJEMPLO DE ANIMACIÓN

Os mostramos un ejemplo de un cubecraft animado. En este caso es una animación bastante simple:

[codepen_embed height=”457″ theme_id=”0″ slug_hash=”NxJVwM” default_tab=”result” user=”jesusesteban”]See the Pen <a href=’http://codepen.io/jesusesteban/pen/NxJVwM/’>Star wars</a> by Jesús Esteban Sánchez (<a href=’http://codepen.io/jesusesteban’>@jesusesteban</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

En la siguiente línea de código, lo que hacemos es decirle a .robot qué es lo que tiene que hacer mediante el parámetro animation, jump es el nombre de la animación, 2s el tiempo que dura la animación, easy-out indica la curva de velocidad de la animación, y por último infinite, lo cual indica que nuestra animación es infinita.

@-webkit-keyframes rotate{
  from{
    -webkit-transform: scale(0.2) rotateY(40deg) rotateX(3deg) rotateZ(3deg);
  }

  to{
    -webkit-transform: scale(0.2) rotateY(400deg) rotateX(3deg) rotateZ(3deg);
  }
}

@keyframes rotate {
  from{
    transform: scale(0.2) rotateY(40deg) rotateX(3deg) rotateZ(3deg);
  }
  
  to{
    transform: scale(0.5) rotateY(400deg) rotateX(3deg) rotateZ(3deg);
  }
}

CONCLUSIONES

No hace falta ser un hacha del CSS para poder crear las animaciones. En sitios como Codepen podemos encontrar muchas de ellas y  siempre podemos recurrir a las librerías que antes hemos mencionado. Y ojo, muy a tener en cuenta el soporte con navegadores.

Jesús Esteban

desarrollo

Back to top