Tengono animado elemento por defecto. También hay un disparador que me permite activar y desactivar la animación en ese elemento. La animación en sí es muy simple: mueve el elemento de izquierda a derecha y viceversa.

Cuando detengo la animación, mi elemento obviamente vuelve a la posición inicial. Pero vuelve de repente, no sin problemas. Por lo tanto, solo cambia su posición de cuando apagué la animación a la inicial. Mi pregunta es: ¿hay alguna manera de detenerlo sin problemas, por lo que cuando apago la animación vuelve a la posición inicial pero sin problemas / animando?

Aquí está mi elemento y animación:http://jsfiddle.net/2Lwftq6r/

HTML:

<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>

CSS:

div { 
    margin-top: 50px;
    width: 50px; height: 10px;
    background: #000;
    transform: translateX(0);
}

#anim:checked ~ div {
    -webkit-animation: dance 2s infinite ease-in-out;
    -moz-animation: dance 2s infinite ease-in-out;
}

@-webkit-keyframes dance {
  0%, 100% { -webkit-transform: translateX(0); }
  50% { -webkit-transform: translateX(300px); }
}
@-moz-keyframes dance {
  0%, 100% { -moz-transform: translateX(0); }
  50% { -moz-transform: translateX(300px); }
}