eu tenhonão animado elemento como padrão. Há também um gatilho que permite ativar e desativar a animação nesse elemento. A animação em si é muito simples: move o elemento da esquerda para a direita e para trás.

Quando paro a animação, meu elemento obviamente volta à posição inicial. Mas ele volta repentinamente, sem problemas. Então, ele muda de posição quando desativei a animação para a inicial. Minha pergunta é: existe uma maneira de interrompê-lo sem problemas, então quando desligo a animação, ela volta à posição inicial, mas sem problemas / animando.

Aqui está o meu elemento e animação: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); }
}