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

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

<h2 id="Definición">Definición</h2>

<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code>animation-fill-mode</code> especifica el modo en que una animación CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución.</p>

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

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

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("animation-fill-mode")}}
</pre>

<pre>animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

<strong>El caracter # indica que pueden darse varios valores separados por comas.
Cada uno de los valores se aplicará en el mismo orden en que se ha declarado en la propiedad 'animation'</strong>
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none
</pre>

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

<dl>
 <dt><code>none</code></dt>
 <dd>La animación no aplicará los estilos antes ni después de su ejecución.</dd>
 <dt><code>forwards</code></dt>
 <dd>El objeto sobre el que se aplica la animación quedará con los valores y estilos que le aplique el último keyframe de la ejecución de la animación. El último valor dependerá del valor de {{ cssxref("animation-direction") }} y {{ cssxref("animation-iteration-count") }}:
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col"><code>animation-direction</code></th>
    <th scope="col"><code>animation-iteration-count</code></th>
    <th scope="col">ultimo keyframe encontrado</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>normal</code></td>
    <td>even o odd</td>
    <td><code>100%</code> or <code>to</code></td>
   </tr>
   <tr>
    <td><code>reverse</code></td>
    <td>even o odd</td>
    <td><code>0%</code> or <code>from</code></td>
   </tr>
   <tr>
    <td><code>alternate</code></td>
    <td>even</td>
    <td><code>0%</code> or <code>from</code></td>
   </tr>
   <tr>
    <td><code>alternate</code></td>
    <td>odd</td>
    <td><code>100%</code> or <code>to</code></td>
   </tr>
   <tr>
    <td><code>alternate-reverse</code></td>
    <td>even</td>
    <td><code>100%</code> or <code>to</code></td>
   </tr>
   <tr>
    <td><code>alternate-reverse</code></td>
    <td>odd</td>
    <td><code>0%</code> or <code>from</code></td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>backwards</code></dt>
 <dd>La animación aplicará los valores definidos en el primer <a href="/en-US/docs/CSS/@keyframes">keyframe</a> tan pronto como se aplique al objeto, y los retendrá durante el tiempo de {{ cssxref("animation-delay") }}. El primer keyframe dependerá del valor de {{ cssxref("animation-direction") }}:
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col"><code>animation-direction</code></th>
    <th scope="col">primer keyframe</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>normal</code> o <code>alternate</code></td>
    <td><code>0%</code> or <code>from</code></td>
   </tr>
   <tr>
    <td><code>reverse</code> o <code>alternate-reverse</code></td>
    <td><code>100%</code> or <code>to</code></td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>both</code></dt>
 <dd>La animación seguirá las reglas de las opciones forwards y backwards, extendiendo las propiedades de la animación en ambas direcciones.</dd>
</dl>

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

<p>Puedes ver el efecto de animation-fill-mode en el siguiente ejemplo.  Para animaciones que iteran de forma infinita, puede que quieras que al final de cada iteración queden en su estado final mejor que en el estado inicial. </p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;Mueve el raton sobre la caja gris&lt;/p&gt;
&lt;div class="demo"&gt;
  &lt;div class="grows"&gt;Esto sólo crece&lt;/div&gt;
  &lt;div class="growsandstays"&gt;Esto crece y se queda grande&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}</pre>

<p>{{ EmbedLiveSample('Example',700,300) }}</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}</td>
   <td>{{ Spec2('CSS3 Animations') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

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

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</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" title="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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</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 CSS Animations</a></li>
 <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
</ul>