Come ripristinare gradualmente l'animazione CSS al suo stato attuale?

Question

Io ho non animato elemento come predefinito. C'è anche un trigger che mi consente di attivare l'animazione & su quell'elemento. L'animazione stessa è molto semplice: sposta l'elemento da sinistra a destra e viceversa.

Quando interrompo l'animazione, il mio elemento torna ovviamente alla posizione iniziale. Ma torna improvvisamente, non senza intoppi. Quindi cambia solo la sua posizione da quella in cui ho disattivato l'animazione in quella iniziale. La mia domanda è: c'è un modo per fermarlo senza problemi, così quando spengo l'animazione ritorna alla posizione iniziale ma senza problemi/animando.

Ecco il mio elemento e animazione: 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

Partenza This StackOverflow question.

Questa risposta non ti piacerà, ma la realtà è che le animazioni CSS3 non sono davvero utili per raggiungere questo obiettivo. Per far sì che questo funzioni, è necessario che lo replichi un sacco di CSS nel tuo Javascript che tipo distrugge il punto (ad esempio in questa risposta strettamente correlata Change speed of animation CSS3?). Per fermarsi davvero, la soluzione migliore sarebbe scrivere l'animazione su una piattaforma come la Greensock animation library che fornisce tutti gli strumenti necessari per farlo in modo uniforme fermarsi invece di fermarsi improvvisamente.

C'è anche un'altra risposta sotto di esso che fa uno sforzo per l'utilizzo di CSS, è possibile guardare a quello.

Answer 2

Non è possibile archiviare questo effetto solo in modo CSS3, ma se proprio ne avete bisogno, è possibile utilizzare jQuery + CSS3 Transitions. La mia soluzione (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. I prefissi dei fornitori si basano sull'elenco dei browser effettivi da http://caniuse.com.

Answer 3

Ho appena avuto lo stesso problema e l'ho risolto non utilizzando l'animazione e funziona perfettamente!Scopri la mia soluzione: Così ho avuto questa spatola che ho dovuto spostare quando aleggiava solo, e volevo che la transizione indietro senza problemi, quindi questo è quello che ho fatto:

#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; 

} 

Buona fortuna!