Animaciones con CSS3

Animaciones con CSS3

Bueno en esta ocasión les mostrare como crear animaciones sin la necesidad de Adobe flash o imágenes predisañadas, solo con CSS3.
Para crear una animación tenemos el elemento animation, con esto lo que hacemos es definir, en un selector de CSS, las propiedades para una animación con su tiempo de reproducción.

 .claseAnimacion{
    animation: nombre_animacion 5s;
   -webkit-animation: nombre_animacion 5s;
   -moz-animation: nombre_animacion 5s;
   -o-animation: nombre_animacion 5s;
  }

Notese que en el selector .claseAnimacion, el elemento animation: nombre_animacion 5s;,se especifica el nombre que tendrá la animación y el tiempo que durará, en este caso son cinco segundos. También esta indicado cuatro veces para mayor compatibilidad con los navegadores.
Lo siguiente es definir la funcionalidad de la animación, para esto utilizamos el selector @keyframes, que se utiliza para indicar que código CSS ejecutar en un momento específico de la animación.
Se define de la siguiente forma:

@keyframes nombre_animacion {
  0%{background:#FC0;}
  100%{background:#CF0;}
}

Aquí especificamos en el selector @keyframes, el nombre de la animación previamente declarada y agregamos el código css que queramos ejecutar en un momento especifico de la animación, estos momentos están expresados en porcentajes. En el caso del ejemplo anterior el 0% indica el momento inicial y el 100% el momento final de los 5 segundos. Si queremos agregar mas momentos, simplemente indicamos mas porcentajes en un orden lógico.

@keyframes nombre_animacion {
  0%{background:#FC0;}
  25%{background:#0C6;}
  50%{background:#FC0;}
  75%{background:#CF0;}
  100%{background:#FC0;}
}

Ejemplo:

Para compatibilidad de navegadores también podemos anteponer, al modificador, los elementos -webkit- (Chrome),-moz- (Mozilla, Firefox),-o- (Opera)
Quedaría de la siguiente forma:

@-webkit-keyframes nombre_animacion {
  0%{-webkit-background:#FC0;}
  25%{-webkit-background:#0C6;}
  50%{-webkit-background:#FC0;}
  75%{-webkit-background:#CF0;}
  100%{-webkit-background:#FC0;}
}
@-moz-keyframes nombre_animacion {
  0%{-moz-background:#FC0;}
  25%{-moz-background:#0C6;}
  50%{-moz-background:#FC0;}
  75%{-moz-background:#CF0;}
  100%{-moz-background:#FC0;}
}
@-o-keyframes nombre_animacion {
  0%{-o-background:#FC0;}
  25%{-o-background:#0C6;}
  50%{-o-background:#FC0;}
  75%{-o-background:#CF0;}
  100%{-o-background:#FC0;}
}

Ejemplos:
Girar elementos.

<style type="text/css">
  .claseAnimacion{
    animation: giro 5s;
   -webkit-animation: giro 5s;
   -moz-animation: giro 5s;
   -o-animation: giro 5s;
  }
@keyframes giro {
  0%{transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
  100%{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes giro {
  0%{transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
  100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes giro {
  0%{transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
  100%{-webkit-transform:rotate(360deg);}
}
@-o-keyframes giro {
  0%{transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
  100%{-webkit-transform:rotate(360deg);}
}
</style>

Movimiento:

<style type="text/css">
  .movimiento{
    border:1px solid #F60;
    background:#FC0;
    width:100px;
    height:100px;
    animation: movimiento_animacion 5s;
    -webkit-animation: movimiento_animacion 5s;
    -moz-animation: movimiento_animacion 5s;
    -o-animation: movimiento_animacion 5s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
  }
@keyframes giro {
  0%{transform:translate(10px,0px);}
  100%{transform:translate(100px,0px);}
}
@-webkit-keyframes giro {
  0%{-webkit-transform:translate(10px,0px);}
  100%{-webkit-transform:translate(100px,0px);}
}
@-moz-keyframes giro {
  0%{-moz-transform:translate(10px,0px);}
  100%{-moz-transform:translate(100px,0px);}
}
@-o-keyframes giro {
  0%{-o-transform:translate(10px,0px);}
  100%{-o-transform:translate(100px,0px);}
}
</style>

Parámetros adicionales de animation

El elemento animation maneja varios parámetros para el control de la animación. Algunos de ellos son:

Propiedad	Descripción
animation-name	Especifica el nombre para los @keyframes de animation
animation-duration	Especifica cuántos segundos o milisegundos tarda en completar un ciclo. Por defecto 0
animation-delay	Especifica cuando la animación se iniciará. Por defecto 0
animation-iteration-count	Especifica el número de veces que una animación reproduce. Por defecto 1. Tambien se puede indicar el valor "infinite" para reproducirlo de forma infinita.
animation-direction	Especifica si la animación se reproduce a la inversa en ciclos alternos. Por defecto "normal", otros valores: reverse, alternate, alternate-reverse.
animation-play-state	Especifica si la animación se está ejecutando o está en pausa. Por defecto "running", otros valores: "paused"

Ejemplo:

<style type="text/css">
  .movimiento{
    animation: movimiento_animacion 5s;
    animation: movimiento_animacion 5s;
    animation-name: myanimacion;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
  }
</style>