Ich habenicht animiert Element als Standard. Es gibt auch einen Auslöser, mit dem ich die Animation für dieses Element ein- und ausschalten kann. Die Animation selbst ist sehr einfach: Verschiebt das Element von links nach rechts und zurück.

Wenn ich die Animation stoppe, kehrt mein Element offensichtlich zur ursprünglichen Position zurück. Aber es geht plötzlich zurück, nicht reibungslos. Es ändert also nur seine Position von der, als ich die Animation ausgeschaltet habe, zur ersten. Meine Frage ist: Gibt es eine Möglichkeit, es reibungslos zu stoppen? Wenn ich die Animation ausschalte, kehrt es zur ursprünglichen Position zurück, aber reibungslos / animierend.

Hier ist mein Element und Animation: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); }
}