Práctica 7

Al asignar @keyframes el estilo cambiará gradualmente desde un estilo a otro, esto debe asignarse a un elemento, con animation-name (aquí se pone el nombre de la animación) y con animation-duration debes poner lo que durará la animación. Si no se pone, por defecto es 0, es decir, que no se ejecutará la animación.

@keyframes nombreAnimación {...código...}

Para que las animaciones funcionen en algunos navegadores hay que agregar el prefijo correspondiente al selector y al keyframes:

• -webkit- /* Chrome, Safari, Opera */
• -moz- /* Mozilla */
• -ms- /* Explore */

Para crear cambios gradualmente existen varias maneras:

• Con from to: Pasa del color rojo al amarillo.




Código:




#colores{

width: 100px;
height: 100px;
background-color: red;
animation-name: colores;
animation-duration: 5s;

}




@keyframes colores {


from {background-color: red;}
to {background-color: yellow;}

}







• Con porcentajes: Aparece el camaleón.






Código:




camaleon{

width: 195px;
height: 125px;
background-image: url("camaleon4.png");
background-repeat: no-repeat;
animation-name: camaleon;
animation-duration: 15s;

}




@keyframes camaleon {

0% {opacity: 0;}
100% {opacity: 1;}

}

Con animation-delay puedes retrasar una animación.

En este ejemplo se retrasa 5s antes de empezar.

Código:

#tortuga{

width: 195px;
height: 125px;
background-image: url("tortuga.png");
background-repeat: no-repeat;
position: relative;
animation-name: tortuga;
animation-duration: 5s;
animation-delay: 5s;

}

@keyframes tortuga {

0% {left:0px; top:0px;}
100% {left:200px; top:0px;}

}

Con animation-iteration-count, especificas el número de veces que se ejecuta la animación.

Código:

#pelota{

width: 100px;
height: 100px;
background-image: url("pelota.png");
background-repeat: no-repeat;
position: relative;
animation-name: pelota;
animation-duration: 5s;
animation-iteration-count: 3;

}

@keyframes pelota {

0% {left:0px; top:0px;}
100% {left:400px; top:0px;}

}

Con "animation-direction" indicas si la animación debe retroceder hasta el fotograma de inicio al terminar la secuencia o si debe comenzar desde el principio; es decir, puedes evitar que una animación salte al inicio cada vez que comience, al repetirse ésta. Su valor inicial es "normal".

Así, si ponemos "animation-direction: alternate" no queda un corte brusco y da la sensación, como en este caso, de que va hacia adelante y vuelve hacia atrás.

Código:

#dado{

background-image: url("dado.png");
background-repeat: no-repeat;
position: relative;
animation-name: dado;
animation-duration: 5s;

}

@keyframes dado {

0% {left:0px; top:0px;}
100% {left:400px; top:0px;}

}

.general{

width: 140px;
height: 130px;
background-size: 80px;

}

.alternarInfinito{

animation-direction: alternate;
animation-iteration-count: infinite;

}

Con "animation-play-state" puedes pausar y reanudar la animación. Su valor inicial es "running" (vemos cómo se va desarrollando la animación, como es el caso de todos los ejemplos anteriores).

Teniendo esto en cuenta, si pones "animation-play-state: paused" la animación no se ejecutará, quedará inmóvil. Usando exactamente el mismo ejemplo anterior y añadiéndole esta propiedad, vemos como la animación queda pausada. Para que vuelva a funcionar, basta con poner "running" en vez de "paused".

Código:

.pausa{

animation-play-state: paused;

}

Con "animation-timing-function" puedes indicar el ritmo de la animación (cómo se muestran los fotogramas, estableciendo curvas de aceleración). Su valor inicial es "ease". Puede tener los valores: linear, ease, ease-in, ease-out y ease-in-out.

• Usando linear: misma velocidad de principio a fin.



Código:




.medida{

width: 70px;
height: 70px;
background-size: 50px;

}




.timingLinear{

animation-timing-function: linear;

}



• Usando ease: comienzo lento, después acelera y final lento.


• Usando ease-in: comienzo lento.


• Usando ease-out: final lento.


• Usando ease-in-out: comienzo y final lento.

En los demás casos es igual, pero cambiando el valor de la propiedad "animation-timing-function" por el valor correspondiente (en estos casos, se ha creado una clase para cada uno, como vemos en la opción de "linear").

Con "animation-fill-mode" indicas qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma...). Su valor inicial es "none". Vamos a poner dos ejemplos, limitando la repetición a dos veces y quitando la dirección ("alternate") para que no vaya de un lado hacia otro.

• Usando fordwards: se queda en el estado final.



Código:




.repeticion{

animation-iteration-count: 2;

}




.final{

animation-fill-mode: forwards;

}



• Usando backwards: se queda en el estado inicial.



En este caso es igual, pero cambiando la propiedad "animation-fill-mode" por el valor indicado (usamos la clase correspondiente para ello).