June 17, 2014

css3-markup

Animando con CSS

Ok esto no es el hilo negro, pero me gustó como se pueden ligar más de una animación de CSS en un mismo elemento.

Para este ejercicio voy a usar uno de los sprites de Chispita para hacer animaciones de sprites basados en keyframes y aparte darle un movimiento horizontal a todos los elementos con diferentes tiempos.

Link a demo

El HTML

Este HTML es realmente muy simple, solo son cuatro elementos div que vamos a animar por el DOM

<div></div>
<div></div>
<div></div>
<div></div>

EL CSS

Aquí es donde realmente sucede la magia. Pero para no confundirlos, vamos por partes.

body {
  background-color: #B4CCDB;
  overflow:hidden;
}
div {
  width: 32px;
  height: 20px;
  position: absolute;
  top: 0;
  background-image: url("http://zerothedragon.com/chispita/assets/rat.png");
  background-position: -4px -70px;
}

Hasta el momento vamos con cosas simples. Solo agregamos algunas reglas para el display general.
Ok, ahora vamos por las animaciones:

div:nth-child(1) {
  -webkit-animation: move 4000ms 0ms infinite cubic-bezier(.42,0,1,1),play .2s steps(3) infinite;
}

¿Qué pasó aquí?… No se preocupen, vamos a desmembrar esto:
Primero el div:nth-child(1) Es una regla para decirle al CSS que solo afecte al primer CSS
Ahora la animación. Si se dan cuenta son dos animaciones aplicadas.
La primera es move 4000ms 0ms infinite cubic-bezier(.42,0,1,1)
Esto le dice al elemento que aplique la animación llamada “move”, con una duración de 4000 milisegundos, con un retraso de inicio de cero milisegundos y que se repita para siempre. El modo de la animación es tipo “cubic-bezier” (más info aquí). Y la segunda es play .2s steps(3) infinite
Esto le dice al elemento que aplique la animación llamada “play”, con una duración de 0.2 segundos, haciendo tres cuadros y que se repita para siempre.
Con esto aplicamos estilos al primer elemento, pero nos faltan 3. Hasta aquí no se vería mal. Pero para lograr todo el efecto deseado, vamos a agregar otros tres elementos al CSS.

div:nth-child(2) {
  -webkit-animation: move 4500ms 0ms infinite cubic-bezier(1,.42,1,1),play .2s steps(3) infinite;
}
div:nth-child(3) {
  -webkit-animation: move 3500ms 0ms infinite cubic-bezier(.42,0,.42,1),play .2s steps(3) infinite;
}
div:nth-child(4) {
  -webkit-animation: move 3000ms 0ms infinite cubic-bezier(.42,1,1,1),play .2s steps(3) infinite;
}

Si se dan cuenta, no son los mismos valores, esto es para darle un inicio desigual a todas las animaciones y no se vean parejas.

Ahora se preguntarán “¿Y las animaciones move y play, de donde salen?”. Tienen razón, vamos a definirlas:

@-webkit-keyframes move {
  0% {left: 0%;}
  100% {left: 100%;}
}
@-webkit-keyframes play {
  0% {background-position-x: 0px;}
  100% {background-position-x: -96px;}
}

La animación “move” inicia con el elemento con un left de 0% y termina con un left de 100%, el CSS se encarga de hacer este movimiento de forma gradual para que se vea la animación y no solo brinque de un lado a otro el elemento.
La animación “play” inicia con el fondo del elemento en posición (en eje X) a 0px y termina con la posición en -96px. Estos valores dependerán del sprite que estén usando. Pero la lógica es la misma.

Todo el código

Al final, el código completo se ve así:

  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <style>
  body {
    background-color: #B4CCDB;
    overflow:hidden;
  }
  div {
    width: 32px;
    height: 20px;
    position: absolute;
    top: 0;
    background-image: url("http://zerothedragon.com/chispita/assets/rat.png");
    background-position: -4px -70px;
  }
  div:nth-child(1) {
    -webkit-animation: move 4000ms 0ms infinite cubic-bezier(.42,0,1,1),play .2s steps(3) infinite;
  }
  div:nth-child(2) {
    -webkit-animation: move 4500ms 0ms infinite cubic-bezier(1,.42,1,1),play .2s steps(3) infinite;
  }
  div:nth-child(3) {
    -webkit-animation: move 3500ms 0ms infinite cubic-bezier(.42,0,.42,1),play .2s steps(3) infinite;
  }
  div:nth-child(4) {
    -webkit-animation: move 3000ms 0ms infinite cubic-bezier(.42,1,1,1),play .2s steps(3) infinite;
  }
  @-webkit-keyframes move {
    0% {left: 0%;}
    100% {left: 100%;}
  }
  @-webkit-keyframes play {
    0% {background-position-x: 0px;}
    100% {background-position-x: -96px;}
  }

  </style>

Compatibilidad

Recuerden usar sus -moz- y -webkit- para poder maximizar la compatibilidad con navegadores en el demo se los agregué a todos para que puedan jugar. En todo caso si estás usando IE, hazte un favor e instala Chrome.

Como siempre, si algo de esto les sirve o les gusta y quieren demostrar su agradecimiento o simplemente quieren contribuir al buen karma digital. Pueden invitarme algo con el menú que está a la derecha :D

Zero out.