Animaciones (animation-iteration-count y animation-direction)

La propiedad CSS animation-iteration-count define el numero de veces que un ciclo de animación debe ser ejecutado antes de detenerse, y la propiedad CSS animation-direction indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

La propiedad animation-iteration-count especifica el número de veces que se debe reproducir una animación.

Sintaxis

animation-iteration-count: number|infinite

Opciones

number Un número que define cuántas veces se debe reproducir una animación. El valor predeterminado es 1
infinite Especifica que la animación debe reproducirse infinitas veces (para siempre)

<!DOCTYPE html>
<html>
<head>
<style>

.op {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: infinite;
}

@keyframes mymove {
from {left: 0px;background: red;}
to {left: 400px;background: gold;}
}

</style>
</head>
<body>
<p>Reproduce la animación para siempre:</p>
<div class="op"></div>
<p><strong>Nota:</strong> La propiedad animation-iteration-count no es compatible con Internet Explorer 9 y versiones anteriores.</p>
</body>
</html>

Reproduce la animación para siempre:

Nota: La propiedad animation-iteration-count no es compatible con Internet Explorer 9 y versiones anteriores.

La propiedad animation-direction define si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos.

Sintaxis

animation-direction: normal|reverse|alternate|alternate-reverse

Opciones

normal Valor predeterminado. La animación se reproduce normalmente (hacia delante)
reverse La animación se reproduce en sentido inverso (al revés)
alternate La animación se reproduce primero hacia adelante y luego hacia atrás
alternate-reverse La animación se reproduce primero hacia atrás y luego hacia adelante

Ejemplos

Ejemplo animation-direction: alternate-reverse;

<!DOCTYPE html>
<html>
<head>
<style>
.op2 {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}

@keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<p>Reproduzca la animación primero hacia atrás, luego hacia adelante en forma infinita (animation-iteration-count: infinite):</p>
<div class="op2"></div>
</body>
</html>

Reproduzca la animación primero hacia atrás, luego hacia adelante en forma infinita (animation-iteration-count: infinite):

Ejemplo animation-direction: reverse;

<!DOCTYPE html>
<html>
<head>
<style>
.op2 {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s 2;
animation-direction: reverse;
animation-iteration-count: 5;
}

@keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<p>Reproduzca la animación desde hacia atrás, hacia adelante en forma 5 veces (animation-iteration-count: 5):</p>
<div class="op2"></div>
</body>
</html>

Reproduzca la animación desde hacia atrás, hacia adelante en forma 5 veces (animation-iteration-count: 5):