Wie Zweiweg-CSS3 Animationen

Question

Tor machen: Animation erreichen, die

• ursprünglichen Stil es resultierende Arten
• es zum Entfernen Trigger Klasse spielt nach vorne und hält
• auf dem Hinzufügen einige Klasse anwenden spielt rückwärts und kehrt in den Grundzustand zurück

Was ich bekam:

@keyframes translate { 
    0% { 
    transform: translate3d(-100%,0,0); 
    } 
    100% { 
    transform: translate3d(0,0,0); 
    } 
} 
.element { 
    animation-direction: reverse; 
    animation-duration: 0.35s; 
    animation-fill-mode: both; 
    animation-name: translate; 
    animation-play-state: running; 
    animation-timing-function: ease-in-out; 
} 
.element.is-animated { 
    animation-direction: normal; 
} 

Ergebnis:

Es wie oben beschrieben funktioniert, (hält Stil nach Bedarf) mit Ausnahme des Mangels an glatter Animation. Ändert einfach Stile sofort. Ich denke, es gibt einige Regeln, die sich überschneiden.

Hat jemand das gleiche gemacht? Ich habe kein richtiges Tutorial für dieses spezielle Problem gefunden.

Answer 1

Wenn Sie nur zwischen diesen beiden Transformationseigenschaften wechseln. Verwenden Sie Übergang statt Animation.

.element { 
    transition:transform .2s ease; 
    width:30px; 
    height:30px; 
    border:1px solid red; 
    transform: translate3d(0,0,0); 
} 
    .element.is-animated { 
    transform: translate3d(-100%,0,0); 
    } 

Gerade sollten Sie die Klasse hinzufügen, entfernen wird animiert, wenn Sie der Übergang stattfinden soll