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):