Una animación es
cualquier elemento o grupo de elementos que se mueve o cambia de aspecto progresivamente.
Hasta la llegada
de CSS3 para poder ostentar una animación en la web era necesario hacerlas con
Javascript o usar programas como Adobe Flash o Java
El proceso para
crear una animación puede ser más o menos complicado según el programa que
usemos y el tipo de animación. Para crear la ilusión del movimiento, una imagen
se muestra en pantalla sustituyéndose rápidamente por una nueva imagen en un
fotograma diferente. Esta técnica es idéntica a la manera en que se logra la
ilusión de movimiento en las películas y en la televisión. Este cambio se
realiza de manera gradual, de forma que vemos como el elemento va cambiando, la
velocidad de cambio debe ser tal que el ojo la perciba como un movimiento
continuo (superior a 12 cambios por segundo).
Las animaciones
con CSS3 utilizan el método de fotogramas clave al igual que programas como
Adobe Flash.
Los fotogramas
clave son los que marcan el estado del elemento animado al principio, al final,
o cuando éste tenga que variar de forma no previsible.
Por ejemplo, si
quisiéramos que un elemento se mueva de arriba hacia abajo, posicionamos en el
primer fotograma el elemento en un punto arriba, y en el segundo fotograma lo
posicionamos debajo y se indica el tiempo que tiene que tardar de ir de uno a
otro; si queremos que después el elemento siga moviéndose hacia la derecha, lo
posicionaremos en un tercer fotograma clave, situado en un punto a la derecha del
segundo. El elemento recorrerá en línea recta del primero al segundo fotograma
y seguidamente del segundo al tercero. Todos los estados intermedios del
elemento entre los fotogramas 1, 2 y 3 se calculan automáticamente.
Entrando en
materia con CSS3.
La regla @keyframes
En CSS los
fotogramas clave se crean mediante la regla @keyframes la cual tiene la siguiente estructura:
@keyframes <nombre> {
0%{<propiedad: valor>+}
100%{<propiedad: valor>+}
}
En la posición
del selector escribimos la palabra clave @keyframes
seguido de un nombre que le daremos a la animación. Este nombre es necesario
para poder dar después otras propiedades de animación, como puede ser el
tiempo.
Dentro de la
declaración (espacio entre llaves) pondremos los diversos fotogramas clave. los
cuales son unas sub-reglas CSS compuestas de:
Selector:
Los selectores indican el punto en el que se coloca el fotograma clave. Se
indican en tantos por ciento. El primero debe ser siempre el 0% que indica el
principio de la animación, y el último el 100% e indica el final. Entre medio
se pueden colocar más fotogramas clave, indicando siempre en tanto por ciento
el punto en el que estará el fotograma. Cuando hay sólo dos fotogramas pueden
usarse también las palabras clave from para el primero y to para el último.
Declaración:
Dentro de las llaves de los fotogramas pondremos las propiedades CSS del elemento
en el momento que se visualice el fotograma. Por ejemplo, en el primero
marcamos el color, posición y tamaño inicial; en el último marcamos color,
posición y tamaño final. Las propiedades, siempre que puedan, (propiedades que
contienen números, medida, color, etc.) cambiarán gradualmente del primero al
último durante el tiempo que dure la animación.
Compatibilidad con navegadores: Los principales navegadores admiten en sus últimas versiones la
regla @keyframes. Los que incorporan
la forma estándar son Firefox, Opera e Internet Explorer mayor a partir de su
versión 10. Safari y Chrome siguen utilizando la forma experimental con el
prefijo -webkit- (@-webkit-keyframes).
Propiedades de animación.
Para crear una
animación simple en primer lugar debemos indicar qué elemento de la página es
el que tiene la animación. Esto se hace mediante la propiedad:
#animacion { animation-name: <nombre> }
El nombre que
pongamos como valor debe ser el mismo que lleva la regla @keyframe; de esa manera quedará asociada al elemento que marca el
selector.
En segundo lugar,
debemos marcar el tiempo que dura la animación. Este lo indicamos mediante la
propiedad:
animation-duration: <tiempo>;
El tiempo lo
expresaremos en segundos (ej.: 10s) o en milisegundos (ej.: 4000ms) indicándolo
en número seguido de la letra "s" para segundos o "ms" para
milisegundos.
Aunque con esto
ya podemos hacer una animación muy sencilla, la animación que vamos a hacer
como ejemplo tendrá otras dos propiedades, la primera de ellas hará que la
animación se repita indefinidamente:
animation-iteration-count: infinite;
El valor "infinite" hace que la animación se
repita indefinidamente. Además de este valor, a esta propiedad se le puede dar
como valor un número entero positivo, que será el número de veces que se repita
la animación.
Por último,
queremos que la animación, una vez llegue al final, recorra el camino inverso,
viéndose otra vez todo al revés. Para ello utilizaremos la propiedad:
animation-direction: alternate;
el valor
"alternate" hace que la animación al llegar al final se repita en
sentido inverso. También puede tener el valor normal que hace que la animación
vaya sólo en una dirección.
Compatibilidad con navegadores: Al igual que la regla @keyframes
las propiedades de animación han sido incorporadas recientemente en su forma
estándar en son Firefox, Opera e Internet Explorer mayor a partir de su versión
10. Safari y Chrome siguen utilizando la forma experimental con el prefijo
-webkit- (@-webkit-keyframes).
Ejemplo de animación:
Con lo visto
hasta ahora ya podemos hacer un ejemplo de animación sencillo. El ejemplo
consistirá en un cuadrado que se mueve horizontalmente mientras cambia de
color.
Primero la regla
@keyframes, para verla en todos los navegadores la pondremos primero en la
versión estándar, y luego en la forma para Safari y Chrome:
/*Regla keyframes en forma estándar*/
@keyframes animacion {
from { left: 50px; background-color:red }
/*Fotograma inicio*/
to { left: 600px; background-color:blue }
/*Fotograma final*/
}
/*Regla keyframes para Chrome y Safari*/
@-webkit-keyframes animacion
{
from { left: 50px; background-color:red }
/*Fotograma inicio*/
to { left: 600px; background-color:blue }
/*Fotograma final*/
}
En los
fotogramas clave marcamos en el de inicio la posición de partida (maring-left:
50px) así como el color que tendrá cuando esté en esa posición
(background-color:red); y en el fotograma final la posición y color que tendrá
cuando llegue al final maring-left: 600px; background-color:blue). Hemos usado
aquí las palabras clave from para el inicio y to para el final, que equivalen
al 0% y 100% respectivamente.
El elemento
animado debe tener las siguientes propiedades:
-
Position (relative o absolute
para poder usar las propiedades de posicion left, right, top, bottom)
-
Height (para que el elemento
tenga un alto)
-
Width (para que el elemento
tenga un ancho)
-
Además de las propiedades de
animación necesarias para que la animación funcione, que son las indicadas
anteriormente. Al igual que con la regla @keyframes debemos repetirlas en su
forma experimental para que puedan verse en Chrome y Safari.
#div {
/*posicionamiento,
anchura, altura y borde elemento. */
position: relative;
width: 10px;
height: 10px;
/*propiedades de animación*/
animation-name:
animacion; /*referencia nombre*/
animation-duration: 5s; /*tiempo*/
animation-iteration-count: infinite;
/*repeticion indefinida*/
animation-direction: alternate; /*repetir
al revés*/
/*Para Chrome y Safari*/
-webkit-animation-name: mianim;
/*referencia nombre*/
-webkit-animation-duration: 5s;
/*tiempo*/
-webkit-animation-iteration-count:
infinite; /*repeticion indefinida*/
-webkit-animation-direction:
alternate; /*repetir al revés*/
}
Guardamos el
archivo CSS (animiacion.css) y creamos el archivo HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Animación en CSS3</title>
<link rel="stylesheet"
type="text/css" href="animacion.css" />
</head>
<body>
<h1>Animación
en CSS3</h1>
<div id="div"></div>
</body>
</html>
Espero
les haya servido de ayuda.
