Ich habe eine 4-teilige CSS3-Animation, die per Klick abgespielt wird - aber der letzte Teil der Animation soll sie vom Bildschirm entfernen.
Es kehrt jedoch immer zu seinem ursprünglichen Zustand zurück, sobald es gespielt hat. Jeder weiß, wie ich es auf seinem letzten CSS-Frame (100%) stoppen kann oder wie man das gesamte Div, in dem es sich befindet, loswird, sobald es abgespielt wurde.
@keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
css
css-animations
user531192
quelle
quelle
Antworten:
Du schaust nach:
Weitere Informationen zu MDN und zur Browser- Supportliste auf canIuse .
quelle
-webkit-animation-fill-mode: forwards;
100% {}
oder keinto {}
Set hatte, so dassanimation-fill-mode: forwards;
mich selbst mit meiner Animation immer noch auf fallen ließ0%
. (Ich habe einige @ for-Schleifen verwendet, um meine Animationen zu erstellen, und vergessen, einfrom{}
und manuell hinzuzufügen.to{}
);Wenn Sie dieses Verhalten zu einer Kurzform-
animation
Eigenschaftsdefinition hinzufügen möchten, lautet die Reihenfolge der Untereigenschaften wie folgtanimation-name
- Standardnone
animation-duration
- Standard0s
animation-timing-function
- Standardease
animation-delay
- Standard0s
animation-iteration-count
- Standard1
animation-direction
- Standardnormal
animation-fill-mode
- Sie müssen dies einstellenforwards
animation-play-state
- Standardrunning
Daher ist das Ergebnis im häufigsten Fall ungefähr so
Siehe die MDN-Dokumentation hier
quelle
Browser-Unterstützung
Verwendung:-
quelle
Der beste Weg scheint, den Endzustand in den Hauptteil von CSS zu stellen. Wie hier setze ich Breite auf
220px
, damit es endlich wird220px
. Aber anfangen zu0px;
quelle
Ist es nicht Ihr Problem, dass Sie den webkitAnimationName auf nichts zurücksetzen, sodass das CSS für Ihr Objekt auf den Standardzustand zurückgesetzt wird? Bleibt es nicht dort, wo es gelandet ist, wenn Sie nur die Funktion setTimeout entfernen, die den Status zurücksetzt?
quelle
Ich habe gerade eine ähnliche Antwort gepostet, und Sie möchten sich wahrscheinlich Folgendes ansehen:
http://www.w3.org/TR/css3-animations/#animation-events-
Sie können Aspekte einer Animation herausfinden, z. B. Start und Stopp. Wenn Sie dann sagen, dass das Stopp-Ereignis ausgelöst wurde, können Sie mit dem Dom tun, was Sie wollen. Ich habe das vor einiger Zeit ausprobiert und es kann funktionieren, aber ich würde vermuten, dass Sie sich vorerst auf das Webkit beschränken werden (aber das haben Sie wahrscheinlich bereits akzeptiert). Übrigens, da ich den gleichen Link für 2 Antworten gepostet habe, würde ich diesen allgemeinen Rat geben: Schauen Sie sich das W3C an - sie schreiben so ziemlich die Regeln und beschreiben die Standards. Auch die Webkit-Entwicklungsseiten sind ziemlich wichtig.
quelle
Niemand hat es wirklich so gebracht, die Art und Weise, wie es funktioniert, ist der Animations-Wiedergabe-Zustand , der auf pausiert eingestellt ist.
quelle
Ich habe heute erfahren, dass es eine Grenze gibt, die Sie für den Füllmodus verwenden möchten. Dies ist von einem Apple-Entwickler. Das Gerücht ist * um * sechs, aber nicht sicher. Alternativ können Sie den Anfangszustand Ihrer Klasse so einstellen, wie die Animation enden soll, und ihn dann bei / 0% * initialisieren *.
quelle