Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con [animaciones CSS3][1]. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo tanto, la ejecutaremos sólo 1 vez. La escribimos y la aplicamos, como a continuación:

/* creando la animación */<br />
@keyframes gira-y-quedate {<br />
  from {<br />
    transform: rotate(0deg);<br />
  }<br />
  to {<br />
    transform: rotate(160deg);<br />
  }<br />
}
#elemento {<br />
  animation-name: gira-y-quedate;<br />
  animation-duration: 1s;<br />
  animation-iteration-count 1;<br />
}

<p>
  Como notarán al terminar la animación esperamos que quede con la rotación de 160 grados y se detenga pero lo que sucede es que vuelve al <em>keyframe</em> inicial, a los 0 grados. Ese es el comportamiento por defecto de la propiedad <strong>animation-fill-mode</strong>, la cual especifica cómo debe aplicarse una animación <strong>CSS</strong> al elemento antes y después que se ejecute. Los valores de esta propiedad son:
</p>

<ul>
  <li>
    <strong>none</strong> (por defecto, la animación no aplicará ningún estilo al elemento antes ó despues de ejecutarse)
  </li>
  <li>
    <strong>forwards</strong> (el elemento mantendrá su(s) valor(es) en el último keyframe de su animación)
  </li>
  <li>
    <strong>backwards</strong> (el elemento aplicará su(s) valor(es) definidos en el primer keyframe de su animación)
  </li>
  <li>
    <strong>both</strong> (la animación aplicará las propiedades de fowards y backwards, antes y después de ejecutarse)
  </li>
</ul>

<p>
  Por lo que aplicando correctamente la propiedad al llamado de la animación obtenemos el resultado esperado:
</p>

<pre><code class="language-markup">#elemento {&lt;br />

animation-name: gira-y-quedate;<br /> animation-duration: 1s;<br /> animation-iteration-count 1;<br /> animation-fill-mode: forwards;<br /> }

<div class="ejemploancho">
  <div id="elemento-ejemplo2">
  </div>
  
  <p>
    <button class="btn_animar verejemplo" rel="elemento-ejemplo2">Animar</button> </div> 
    
    <h4>
      Link:
    </h4>
    
    <ul>
      <li>
        <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state" target="_blank" title="Enlace externo a &quot;animation-play-state | MDN&quot;">animation-play-state | MDN</a>
      </li>
    </ul>
    
    <p>
    </p>

[1]: http://www.csslab.cl/2011/06/21/animaciones-css3-avanzadas/ “Enlace en CSSLab a “Animaciones CSS3 avanzadas””