Otras dos propiedades muy importantes para crear animaciones con css3 son animation-iteration-count y animation-direction:
Elemento {
animation-iteration-count: [cantidad de veces a repetir la animación o "infinite"];
animation-direction: ["normal" o "alternate"];
}
Si queremos que la animación se repita solo tres veces luego indicamos en la propiedad animation-iteration-count dicho valor:
-moz-animation-iteration-count: 3;
En cambio si queremos que se repita siempre luego especificamos el valor "infinite":
-moz-animation-iteration-count: infinite;
La propiedad animation-direction indica como debe repetirse la animación, puede tomar el valor "normal" con lo que la animación cada vez que finaliza comienza desde el principio. Pero si inicializamos con el valor "alternate" cuando finaliza la animación comienza desde el final hasta el principio:
-moz-animation-direction: alternate;
El ejemplo del concepto anterior que muestra un recuadro con un texto que se desplaza de izquierda a derecha cambiando su color, pero ahora indicando que se repita en forma indefinida y con el valor "alternate" en la propiedad animation-direction:
#recuadro1{
left:30px;
position:relative;
border-radius: 20px;
background-color:#ddd;
width:200px;
height:100px;
padding:4px;
-moz-animation-name: animacion1;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-name: animacion1;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-name: animacion1;
-o-animation-duration: 4s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
}
@-moz-keyframes animacion1 {
from {
left:30px;
background-color:#ddd;
}
to {
left:300px;
background-color:#ff0;
}
}
@-webkit-keyframes animacion1 {
from {
left:30px;
background-color:#ddd;
}
to {
left:300px;
background-color:#ff0;
}
}
@-o-keyframes animacion1 {
from {
left:30px;
background-color:#ddd;
}
to {
left:300px;
background-color:#ff0;
}
}