Las nuevas características de CSS nos permiten añadir efectos de animación a la mayoría de elementos HTML, sin necesidad de Javascript o Flash. Por el momento, es compatible con los navegadores WebKit -incluyendo Safari, Safari para iOS y Chrome- y Firefox. Está previsto que Internet Explorer, a partir de su versión 10, también tenga soporte para este tipo de animaciones. Debido a que la tecnología es relativamente nueva, se debe añadir un prefijo con el motor del navegador. En nuestro caso, los ejemplos los realizaremos con los prefijos webkit y moz.
Las animaciones se apoyan en el uso de fotogramas clave -al igual que ocurre con Flash- para crear estados y realizar una transición entre ellos. Así para una animación de una única iteración crearíamos un punto de inicio y un punto final. La animación transcurriría entre estos dos puntos o estados.
PROPIEDADES
- animation-name: En esta propiedad debemos indicar el nombre de la animación a la que hacemos referencia.
- animation-duration: En esta propiedad especificamos el número de segundos o milisegundos de la animación, aceptando valores decimales. Siendo el valor por defecto 0, es decir sin animación.
- animation-iteration-count: En esta propiedad debemos indicar cuantas veces queremos que se repita nuestra animación. Aceptando números enteros e "infinite" para que no deje de repetirse nunca.
- animation-direction: Desde esta propiedad podemos definir si la dirección de nuestra animación es normal o por el contrario preferimos que sea a la inversa en ciclos alternos, alternate.
- animation-timing-function: En esta propiedad podemos definir el modo en que se ejecutará nuestra animación. La curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. La opción por defecto es "ease". Las otras opciones son: "linear", "ease-in", "ease-out", "ease-in-out", y "cubic-bezier".
- animation-fill-mode: Esta propiedad permite definir el estilo antes o después de que se ejecute la animación. La opción forwards aplicará el valor de las propiedades definidas en su último fotograma clave o en el 100%, después de ejecutar la iteración final de la animación. La opción backwards aplicará el valor de las propiedades definidas en el primer fotograma clave o en el 0%. La opción both aplicará el valor de las propiedades al principio y al final. La opción none no aplicará el valor de las propiedades.
- animation-delay: En esta propiedad podemos definir en segundos o milisegundos con que retardo queremos activar nuestra animación.
- animation-play-state: Con esta propiedad podemos pausar y volver a poner en marcha nuestra animación.
Existe una versión corta, denominada "Shorthand Property" que combina 6 de las propiedades en una sóla. Su sintaxis es:
[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]
Para lograr una animación debemos conectar una animación a un elemento en la CSS. Aunque hasta el momento parezca que es un proceso complejo, vamos a realizar un primer ejemplo con una caja, y veremos que en realidad es bastante sencillo:
<div class="caja1"></div>
Ahora le asignamos el siguiente CSS:
.caja1{
width:100px;
height:100px;
background:#FF0000;
position:absolute;
top:0;
}
Ahora establecemos una animación que denominaremos "mover_caja":
/* Para navegadores webkit */
@-webkit-keyframes mover_caja{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}
/* Para Firefox */
@-moz-keyframes mover_caja{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}
Los fotogramas clave que hemos establecido en la animación están en el 0% (inicio), el 50% (la mitad) y el 100% (al final). Las propiedades que hemos establecido en estos fotogramas clave son las diferentes posiciones. Nuestro último paso es "enganchar" la animación con el objeto que queramos. Vamos a aplicarlo a "caja1".
.caja1{
-webkit-animation:mover_caja 5s infinite;
-moz-animation:mover_caja 5s infinite;
}
Ver ejemplo en funcionamiento » »
En el siguiente ejemplo vamos a realizar una animación rotando una capa y escalándola. El ejemplo completo sería:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Animation 2</title>
<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
.circulo span{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
/* Para navegadores webkit */
@-webkit-keyframes rotar
{
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}
/* Para firefox */
@-moz-keyframes rotar
{
0% {-moz-transform:scale(1) rotate(0deg);}
50% {-moz-transform:scale(1.5) rotate(180deg);}
100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo
{
-webkit-animation:rotar 4s infinite;
-moz-animation:rotar 4s infinite;
}
</style>
</head>
<body>
<div id="contenido">
<div class="circulo"><span>webintenta</span></div>
</div>
</body>
</html>
Ver ejemplo en funcionamiento » »
El siguiente ejemplo muestra cómo realizar una transición entre colores.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Animation 3</title>
<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
/* Para navegadores webkit */
@-webkit-keyframes cambiar_color
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Para firefox */
@-moz-keyframes cambiar_color
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
.circulo
{
-webkit-animation:cambiar_color 8s linear 1;
-moz-animation:cambiar_color 8s linear 1;
}
</style>
</head>
<body>
<div id="contenido">
<div class="circulo"></div>
</div>
</body>
</html>
Ver ejemplo en funcionamiento » »
