---
title: animation-iteration-count
slug: Web/CSS/animation-iteration-count
tags:
  - CSS
  - CSS Animations
  - CSS Property
  - Experimental
  - Reference
translation_of: Web/CSS/animation-iteration-count
---
<div>{{ CSSRef() }}</div>

<div>{{ SeeCompatTable() }}</div>

<h2 id="Resumen">Resumen</h2>

<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code style="font-style: normal;">animation-iteration-count</code> define el numero de veces que un ciclo de animación debe ser ejecutado antes de detenerse.</p>

<p>A menudo es conveniente utilizar la propiedad {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez.</p>

<p>{{cssinfo}}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="twopartsyntaxbox">Sintaxis formal: {{csssyntax("animation-iteration-count")}}
</pre>

<pre>animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

animation-iteration-count: 2, 0, infinite;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>infinite</code></dt>
 <dd>La animación se repetirá siempre.</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>El número de veces que la animación debe repetir: es 1 por defecto. Los valores negativos no son validos. Puede especificar valores no enteros para ejecutar parte de un ciclo de animación (por ejemplo 0.5 se ejecutara la mitad del ciclo de la animación).</dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

<p>Ver ejemplos <a href="/en-US/docs/CSS/Using_CSS_animations">CSS animations</a>.</p>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificaciones</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td>
   <td>{{ Spec2('CSS3 Animations') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Caracteristica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
    {{ CompatGeckoDesktop("16.0") }}</td>
   <td>10 </td>
   <td>12 {{ property_prefix("-o") }}<br>
    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
   <td>4.0{{ property_prefix("-webkit") }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Caracteristicas</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
    {{ CompatGeckoMobile("16.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Usando animaciones CSS</a></li>
 <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
</ul>