Wie kann CSS-Animation problemlos in den aktuellen Zustand zurückgesetzt werden?

Question

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

Wenn ich die Animation stoppe, geht mein Element offensichtlich in die ursprüngliche Position zurück. Aber es geht plötzlich zurück, nicht glatt. Es ändert also nur seine Position von der, als ich die Animation auf die erste abstellte. Meine Frage ist: gibt es eine Möglichkeit, es reibungslos zu stoppen, also wenn ich die Animation ausschalte, geht es zurück zur Ausgangsposition, aber glatt/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); } 
} 

Answer 1

Check out This StackOverflow question.

Sie werden auf diese Antwort nicht gefallen, aber die Realität ist, dass CSS3 Animationen nicht wirklich nützlich sind, um dies zu erreichen. Um das funktionieren zu lassen, müssten Sie viel von Ihrem CSS in Ihrem Javascript replizieren, welches Art von zerstört den Punkt (Wie zum Beispiel in diesem eng verwandten Antwort Change speed of animation CSS3?). Um es wirklich reibungslos stoppen Ihre beste Wette wäre, um die Animation auf einer Plattform wie die Greensock animation library schreiben, die alle Werkzeuge zur Verfügung stellt, die Sie benötigen, um es eigentlich reibungslos stoppen statt plötzlich zu stoppen.

Es gibt auch eine andere Antwort darunter, die sich Mühe bei der Verwendung von CSS gibt, können Sie sich das ansehen.

Answer 2

Sie können diesen Effekt nicht nur CSS3 Weg archivieren, aber wenn Sie es wirklich brauchen, könnten Sie jQuery + CSS3 Transitions verwenden. Meine Lösung (http://jsfiddle.net/sergdenisov/3jouzkxr/10/):

HTML:

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

CSS:

.anim-div { 
    margin-top: 50px; 
    width: 50px; 
    height: 10px; 
    background: #000; 
} 

    .anim-div_active { 
     -webkit-animation: moving 2s ease-in-out infinite alternate; 
     animation: moving 2s ease-in-out infinite alternate; 
    } 

    .anim-div_return { 
     -webkit-transition: -webkit-transform 0.5s ease-in-out; 
     transition: transform 0.5s ease-in-out; 
    } 

@-webkit-keyframes moving { 
    0% { -webkit-transform: translateX(0); } 
    100% { -webkit-transform: translateX(300px); } 
} 

@keyframes moving { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(300px); } 
} 

Javascript:

$('#anim-input').on('change', function() { 
    var $animDiv = $('.anim-div'); 
    if (this.checked) { 
     $animDiv.removeClass('anim-div_return') 
       .addClass('anim-div_active'); 
     return; 
    } 

    var transformValue = $animDiv.css('webkitTransform') || 
         $animDiv.css('transform'); 
    $animDiv.css({'webkitTransform': transformValue, 
        'transform': transformValue}) 
      .removeClass('anim-div_active'); 

    requestAnimationFrame(function() { 
     $animDiv.addClass('anim-div_return') 
       .css({'webkitTransform': 'translateX(0)', 
         'transform': 'translateX(0)'}); 
    }); 
}); 

P.S. Herstellerpräfixe basieren auf der tatsächlichen Browserliste von .

Answer 3

Ich hatte gerade das gleiche Problem und ich löste es, indem ich keine Animation verwendete und es funktioniert perfekt!Schauen Sie sich meine Lösung: So hatte ich diesen Spatel, die ich bewegen musste, wenn sie über nur schwebte, und ich wollte es wieder glatt übergehen, so ist dies, was ich tat:

#Spatula:hover{ 
    animation-direction:alternate; 
    transform: translate(1.2cm,1cm); 
    transition: all 1.5s; 
    -webkit-transition: all 1.5s; 

} 

#Spatula{ 
    -webkit-transition: all 1.5s; 
    transition: all 1.5s; 

} 

Viel Glück!