Animaciones

Una animación permite a un elemento cambiar gradualmente de un estilo otro. Pueder variar todas las propiedades que quieras, para ello necesitas especificar el "keyframe" para la animación. Los "keyframes" guardan los estilos que tendran los elementos en ciertos momentos. Las animaciones, se ejecutan una vez que se ha introducido en la página una vez, y cuando ha terminado vuelve a su posicion original, este es el motivo por el cual la página se recarga automáticamente cada 10 segundos para que se puedan observar estos cambios, aunque esto se puede modificar sin necesidad de recargar la página, esto se explicará mas adelante. Por ejemplo:

Ahora veremos unas propiedades de las animaciones.

Retraso de la animación

Esto hace que haya una pausa del tiempo que querramos antes de que se produzca la animación. Se una con "animation-delay". Algunos ejemplos:

div.delay{width:50px;height: 100px; position: relative;background-color: red;animation-name: ejemplo1;animation-duration: 4s;animation-delay: 2s;}

div.delay2{ height: 60px; width: 60px; position: relative; background: blue;animation-duration: 4s;animation-delay: 4; animation-name: ejemplo1;}

Repetir la animación

Esta propiedad lo que hace es repetir la animación tanta veces cuanto queramos, mediante el uso de "animation-iteration-count: x" (Siendo x las veces que queramos repetirlo). Si ponemos en el valor "infinite" se repetirá infinitamente. Por ejemplo:

div.rep1{ height: 60px; width: 60px; position: relative; background: blue; animation-duration: 5s; animation-name: far1; animation-iteration-count: 3; }

Dirección del movimiento

Otra característica que tiene las animaciones es que podemos cambiar su dirección de movimiento en dos formas: para que se produzca en dirección contraria, o cuando vuelva a repetir el movimiento cambie de sentido. Esto se consigue con: "animation-direction"

Se puede dividir en 4 variantes

normal: Es por defecto, sigue el moviento normal
reverse: Hace el movimiento en dirección contraria
alternate: Una vez hecho el movimiento, lo realiza en dirección contraria
alternate-reverse: Empieza el movimiento en dirección contraria y le sigue con su movimiento normal

div.mov{width:50px;height: 100px; position: relative;background-color: red;animation-name: far1;animation-duration: 4s;animation-direction:normal:}

div.mov{width:50px;height: 100px; position: relative;background-color: red;animation-name: far2;animation-duration: 4s;animation-direction:reverse:}

div.mov{width:50px;height: 100px; position: relative;background-color: red;animation-name: far1;animation-duration: 4s;animation-direction:alternate:}

div.mov{width:50px;height: 100px; position: relative;background-color: red;animation-name: far2;animation-duration: 4s;animation-direction:alternate-reverse:}

Forma final de las animaciones

Como dije al principio, las animaciones una vez producida se reinician, pero esto se puede modificar para que coja la información del primer keyframe o del último. Esto se consigue mediante "animation-fill-mode".

Este se puede dividir en 2.

animation-fill-mode:forwards; Se queda con la última posición que le digamos
animation-fill-mode:backwards; Se queda con la primera posición que le digamos

Por ejemplo:

div.fill1{width:50px;height: 100px; position: relative;background-color: red;animation-name:far1;animation-duration: 4s;animation-fill-mode:forwards;}

div.fill2{width:50px;height: 100px; position: relative;background-color: red;animation-name:far1;animation-duration: 4s;animation-fill-mode:backwards;}

Esto son las propiedades más importantes de las animaciones en CSS, aunque existen otras no he decidido introducirlas puedes encontrarlas en este link.

Ir hacia arriba