Riusa l'animazione CSS in direzione inversa (reimpostando lo stato?)

Question

Ho usato due animazioni di fotogrammi chiave in CSS. Uno si muove da sinistra a destra e l'altro usa esattamente gli stessi valori - ma invertito.

@keyframes moveLeft 
{ 
    from {transform: translate3d(50px, 0, 0);} 
    to {transform: translate3d(0px, 0, 0);} 
} 


@keyframes moveRight 
{ 
    from {transform: translate3d(0px, 0, 0);} 
    to {transform: translate3d(50px, 0, 0);} 
} 

Tuttavia, mi chiedo se sia possibile utilizzare solo un'animazione di fotogrammi chiave. ma non appena aggiungo animation-direction: reverse, l'animazione viene riprodotta solo una volta. Probabilmente salva le informazioni che è stato usato una volta in precedenza. Quindi: posso resettare queste informazioni in qualche modo? O esiste la possibilità di utilizzare un'animazione due volte in direzioni diverse? (Senza l'uso di JS)

http://jsfiddle.net/vrhfd66x/

Answer 1

No, non c'è modo per riavviare l'animazione usando i CSS solo. Dovresti utilizzare JavaScript per rimuovere l'animazione dall'elemento e quindi riapplicarlo all'elemento (dopo un ritardo) per il riavvio.

Il sotto è ciò che il W3C's CSS3 Animation Spec dice (in un contesto diverso, ma il punto dovrebbe valere per questo caso anche):

Si noti inoltre che la modifica del valore di 'animazione-name' non significa necessariamente riavviare un'animazione (ad esempio, se viene applicata una lista di animazioni e una viene rimossa dalla lista, solo quell'animazione si fermerà, le altre animazioni continueranno). Per riavviare un'animazione, deve essere rimosso e quindi riapplicato.

^{corsivo è mio}

Questo CSS Tricks Article da Chris Coiyer indica anche lo stesso e fornisce alcune soluzioni JS per il riavvio un'animazione. (Nota: L'articolo ha un riferimento al dabblet di Oli che afferma che l'alterazione di proprietà come la durata, il conteggio dell'iterazione lo fa riavviare su Webkit ma sembra essere superato poiché non funzionano più su Chrome).

---

Sommario:

Mentre si è già toccato il seguente, ho intenzione di ribadire per completezza:

• Una volta che l'animazione viene applicato sull'elemento, rimane sull'elemento finché non viene rimosso.
• UA tiene traccia dell'animazione sull'elemento e se è stata completata o meno.
• Quando si applica la stessa animazione su :checked (anche se con una direzione diversa), l'UA non fa nulla perché l'animazione esiste già sull'elemento.
• Il cambio di posizione (istantaneo) mentre si fa clic sulla casella di controllo è a causa dello transform applicato all'interno del selettore :checked. La presenza dell'animazione non fa differenza.

---

Solutions:

Come si può vedere dal frammento di seguito, il raggiungimento di questo con una sola animazione è piuttosto complessa anche quando si utilizza JavaScript.

var input = document.getElementsByClassName("my-checkbox")[0]; 
 

 
input.addEventListener('click', function() { 
 
    if (this.checked) { 
 
    this.classList.remove('my-checkbox'); 
 
    window.setTimeout(function() { 
 
     input.classList.add('anim'); 
 
     input.classList.add('checked'); 
 
    }, 10); 
 
    } else { 
 
    this.classList.remove('anim'); 
 
    window.setTimeout(function() { 
 
     input.classList.remove('checked'); 
 
     input.classList.add('my-checkbox'); 
 
    }, 10); 
 
    } 
 
});

input { 
 
    transform: translate3d(50px, 0, 0); 
 
} 
 
.my-checkbox { 
 
    animation: moveLeft 1s; 
 
    animation-direction: reverse; 
 
} 
 
.checked { 
 
    transform: translate3d(0px, 0, 0); 
 
} 
 
.anim{ 
 
    animation: moveLeft 1s; 
 
} 
 
@keyframes moveLeft { 
 
    from { 
 
    transform: translate3d(50px, 0, 0); 
 
    } 
 
    to { 
 
    transform: translate3d(0px, 0, 0); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<input type="checkbox" class="my-checkbox">

Così, l'opzione migliore (se si vuole attaccare alle animazioni CSS) è quello di uso due diverse animazioni.

In alternativa, si potrebbe anche dare un'occhiata al commento di Marcelo. Se il caso d'uso effettivo è esattamente quello che viene fornito nel violino, allora transition è sufficiente e animation non è richiesto. Le transizioni possono funzionare sia in avanti che in senso inverso per natura e quindi sarebbero una scommessa più sicura.