Kernpunkte

• CSS animation-fill-mode Attribut steuert, wie der Stil vor und nach der Ausführung der Animation angewendet wird. none forwards backwards Werte stellen sicher, dass nach Abschluss der Animation der im letzten Keyframe der Animation definierte Stil auf dem Element bleibt, anstatt wieder in den ursprünglichen Stil zu werden. both
• Wert wendet den Stil des ersten Keyframe w?hrend einer Verz?gerung vor Beginn der Animation auf das Element an. forwards Der Wert
• kombiniert die Auswirkungen von backwards und
, wobei der Stil des ersten Keyframe vor Beginn der Animation angewendet wird und den Stil des letzten Keyframe nach dem Ende der Animation beibeh?lt.
• both forwards Fast alle Front-End-Entwickler haben CSS Keyframe-basierte Animationen verwendet. Einige Menschen k?nnen sogar einige komplexe Demonstrationen und Experimente mit dieser Funktion erzeugen. backwards
Wenn Sie eine vollst?ndige Einführung in das Thema ben?tigen, ist mein Beitrag zum Smashing Magazine im Jahr 2011 immer noch eine gute Wahl. In diesem Artikel m?chte ich mich jedoch auf eine Komponente der CSS -Animationsspezifikation konzentrieren: das Attribut

.

Dies ist die einzige animationsbasierte Eigenschaft, die nicht leicht zu verstehen ist. Zum Beispiel wird niemand über

, animation-fill-mode usw. verwirrt, aber was genau bedeutet "Füllmodus"? Lassen Sie uns kurz darüber nachdenken und einige Beispiele geben.

animation-name animation-duration Grammatik

Sie wissen m?glicherweise bereits, dass grundlegende Keyframe -Animationen mithilfe der fill-mode -Regel definiert werden. Wenn Sie jedoch den Keyframe nicht mit dem Animationsnamen verknüpfen, funktioniert der Keyframe nicht. Dies ist eine abgekürzte Animationsattributerkl?rung. Sie k?nnen verstehen, was ich meine:

Natürlich kann die Abkürzung derselben Linie auf: @keyframes erweitert werden

.example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;
}

In beiden Beispielen ist das

-Merkmal zuletzt definiert, und in beiden F?llen wird der Wert auf "

" gesetzt. Wir müssen es am Ende nicht definieren, aber dies kann eine gute Praxis sein.

.example {
  animation-name: myAnim;
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

In ?hnlicher Weise k?nnen Sie m?glicherweise herausfinden, was alles in der obigen Anweisung in der obigen Anweisung ist, auch wenn Sie CSS-Animationen noch nie verwendet haben. animation-fill-mode Die normative Definition von forwards

animation-fill-mode Wie sagt die Spezifikation zu diesem Attribut aus?

Das Attribut fill-mode definiert, welche Werte au?erhalb der Animationsausführungszeit angewendet werden.

Wie es weiter erkl?rt, bezieht sich die Zeit "Au?enausführungszeit" ausdrücklich auf die Zeit zwischen der Zeit, in der die Animation auf ein Element angewendet wird, und der Zeit, in der das Element tats?chlich zu einer Animation beginnt. Wenn Sie den Wert fill-mode verwenden, k?nnen Sie im Grunde genommen definieren, wie das Animationselement au?erhalb der Ausführungszeit der Animation aussieht, aber nachdem die Animation angewendet wurde. Es mag verwirrend klingen, aber Sie werden bald verstehen, was ich meine.

Lassen Sie uns diese grundlegende Definition erweitern, indem Sie jeden m?glichen Wert betrachten (der m?glicherweise noch etwas verwirrend ist).

Zersetzungswert

Das Attribut

animation-fill-mode kann einen von vier Werten akzeptieren: none, forwards, backwards oder both. Hier ist eine Aufschlüsselung jedes Wertes.

Wert: none

Dies ist der anf?ngliche oder Standardwert von animation-fill-mode. Das Definieren des none -Werges ist überflüssig, es sei denn, Sie setzen ihn durch JavaScript ein, um ihn aus anderen Werten zu ?ndern, oder Sie überschreiben etwas im Kaskadieren.

, um zu verstehen, was der Wert none Wert ist, hier ist eine Codepen -Demonstration, die eine Animation ohne animation-fill-mode zeigt (so ist sein Wert none):

[Codepen -Demo -Link (Bitte ersetzen Sie ihn durch den tats?chlichen Link)]

Sie k?nnen sehen, dass in den meisten F?llen der Füllmodus von none nicht das ist, was Sie wollen. Denken Sie daran, dass fill-mode definiert, wie ein Element au?erhalb der Animationsausführungszeit aussieht.

In diesem Beispiel ist der Ball anfangs rot und wird dann nach und nach rosa, w?hrend sie nach rechts bewegt und gleichzeitig die Gr??e ?ndert. Es w?re besser, wenn der Ball klein, rosa und gleich nach dem Ende der Animation bleibt. Dies verhindert, dass der h?ssliche Sprung in den Startzustand nach Ablauf der Animation zurück in den Startzustand springt.

Wert: forwards

Lassen Sie uns die Animation des Balls in fill-mode den Wert "forwards":

?ndern:

[Codepen -Demo -Link (Bitte ersetzen Sie ihn durch den tats?chlichen Link)]

animation-fill-mode Jetzt k?nnen Sie die Vorteile der Verwendung von forwards sehen und warum der Wert

mehr als jeder andere Wert verwendet wird. Wenn wir es mit diesem Wert definieren, teilen wir dem Browser mit, dass das Animationselement seinen endgültigen Stil -Set beibeh?lt, wie im letzten Keyframe definiert. Auf diese Weise springen wir nicht zurück zum Ausgangszustand, bevor das Element die Animation beginnt, nachdem die Animation vorbei ist (die Schaltfl?che "Zurücksetzen", die ich in der Demo hinzugefügt habe, kann dies für uns tun).

backwards Wert:

backwards ?ndern wir den Wert in

- Was passiert jetzt?

[Codepen -Demo -Link (Bitte ersetzen Sie ihn durch den tats?chlichen Link)]

animation-fill-mode Beachten Sie, dass das Verhalten in dieser Demo genau das gleiche ist wie die erste Demo mit einem none -Werte von "

". Warum passiert das?

forwards Im Gegensatz zu backwards verleiht der Wert backwards dem Element seinen Stil, bevor die Animation nach dem Ende der Animation beginnt. Dies ist sinnvoller, wenn wir die Beschreibung des

-Werges durch die Spezifikation sehen:

W?hrend des durch animation-delay definierten Zeitraums wendet die Animation den im Keyframe definierten Attributwert an, in dem die erste Iteration der Animation eingeleitet wird. Dies sind die Werte des Keyframe from oder die Werte des Keyframe. to

Um dies zu demonstrieren, habe ich zwei ?nderungen an der Demonstration vorgenommen:

fügte einen
• Keyframe hinzu, um verschiedene Farben für den Ball zu verwenden. from
Hinzufügen von Verz?gerungen wurden mit dem Attribut
• hinzugefügt. animation-delay

Es ist hier:

[Codepen -Demo -Link (Bitte ersetzen Sie ihn durch den tats?chlichen Link)]

Jetzt k?nnen Sie sehen, dass der Ball blau wird. Dies liegt an der offensichtlichen Verz?gerung. Technisch gesehen hat jede Animation eine Standardverz?gerung, aber die Verz?gerung betr?gt 0S. Und du wirst es auch nicht sehen. Wenn Sie den gleichen Stil und die gleiche Verz?gerung verwenden, wird der Ball, der den Ball rot bleibt, vor Beginn der Animation rot bleibt.

backwards Um ehrlich zu sein, habe ich nicht wirklich viele praktische Verwendungen des backwards -Wergentums gesehen. Es ist kaum vorstellbar, dass in zu vielen F?llen der Stil im ersten Keyframe einer Animation vom statischen Zustand vor der Elementanimation unterscheidet. Aber wenn Sie irgendwelche Ideen haben, würde ich gerne einige Anwendungsf?lle h?ren.

Wert: backwards

Der letzte Wert, den wir anzeigen werden, ist der Wert both. Dieser Wert fordert den Browser an, den Effekt von

und

anzuwenden. both forwards Lassen Sie uns den gleichen Stil in der Demo beibehalten und sehen, was passiert, wenn wir ihn dem backwards -Werchen zuweisen:

[Codepen -Demo -Link (Bitte ersetzen Sie ihn durch den tats?chlichen Link)] both

keine Raketenwissenschaft. Wie Sie sehen k?nnen, wird w?hrend der anf?nglichen Verz?gerung der anf?ngliche Keyframe -Stil angewendet und die Animation endet und der Stil im letzten Keyframe wird eingefroren (wie bereits erw?hnt, ist dies normalerweise das, was Sie wollen). Auch dieser Wert w?re nicht viel anders als die Verwendung von

, wenn es nicht die Verz?gerung und die alternativen Farben im ersten Keyframe gegeben h?tte.

forwards Einige Vorsichtsma?nahmen und Tipps

basierend auf dem obigen Inhalt und einigen Details in der Spezifikation sind Folgendes zu beachten:

• Obwohl ich die Bedeutung der Werte backwards und both etwas minimiert habe, k?nnen diese Werte in komplexen Animationen, die von Skripten oder Benutzereingaben gesteuert werden, nützlich sein. Anwendungsf?lle werden im überfluss vorhanden (denken Sie: Spiele), jedoch nur durch Experimente und Innovation.
• Wenn die Eigenschaft animation-direction auf reverse eingestellt ist, werden die Auswirkungen der Werte forwards und backwards umgekehrt. Wenn Sie mit der Demo herumspielen, werden Sie sehen, wie es funktioniert.
• W?hrend ich sagte animation-fill-mode akzeptiert nur vier Werte, denken Sie daran, dass Sie auch CSS -Bereichsattributwerte verwenden k?nnen.
• In früheren Versionen der Spezifikation war animation-fill-mode nicht Teil der Eigenschaften der Abkürzungsanimation, aber es scheint, dass alle Browser, die Keyframes unterstützen, sie für die Abkürzung verwenden k?nnen.
• Verwenden Sie bei Verwendung der Abkürzung der Animation und der Auswahl eines benutzerdefinierten Namens für die Animation keine Namen, die mit dem gültigen fill-mode -Werwert übereinstimmen (z. Abkürzungserkl?rung unter der Annahme, dass der Name tats?chlich ein reverse -Werte ist. forwards fill-mode

Schlussfolgerung

Ich hoffe, diese Zusammenfassung wird Ihnen helfen, diese Eigenschaft besser zu verstehen. Einige Nachforschungen haben mir wirklich geholfen, es besser zu verstehen. Wenn Sie etwas Einzigartiges über

getan haben oder eindeutige Anwendungsf?lle für verschiedene Werte haben oder Korrekturen in diesem Artikel haben, teilen Sie uns dies bitte in der Diskussion mit.

animation-fill-mode

FAQs über CSS -Animations -Füllmodus Eigenschaften

CSS

Was bedeutet Attribute?

animation-fill-mode CSS

Eigenschaften sind Schlüsselaspekte der CSS -Animation. Es definiert, wie eine Animation Styles vor und nach der Ausführung auf ihr Ziel anwendet. Diese Eigenschaft hilft, den Zwischenzustand der Elemente w?hrend der Animation zu kontrollieren. Es kann vier Werte dauern:

, animation-fill-mode, none und forwards. Jeder Wert bestimmt, wie sich die Animation auf die Elemente in verschiedenen Phasen auswirkt, wodurch Entwickler eine gr??ere Kontrolle über die Animation erhalten. backwards Wie funktioniert der Wert both in

? animation-fill-mode Der Wert forwards css

im Attribut stellt sicher, dass das Element den berechneten Wert für den letzten w?hrend des Animationsprozesses aufgetretenen Keyframe beh?lt. Dies bedeutet, dass nach Ablauf der Animation der im letzten Keyframe definierte Stil auf dem Element bleibt, anstatt wieder in den ursprünglichen Stil zurückzuführen zu werden.

animation-fill-mode K?nnen Sie den Wert von forwards in

erkl?ren?

animation-fill-mode CSS backwards Wert in der Eigenschaft

wendet den Stil des ersten Keyframe auf das Element w?hrend des Zeitraums vor Beginn der Animation an. Dies bedeutet, dass das Element den im ersten Keyframe definierten Stil w?hrend dieser Verz?gerung aufnimmt, wenn es eine Verz?gerung gibt, bevor die Animation beginnt.

Was bedeutet der Wert von

in animation-fill-mode both?

Der Wert

im Attribut animation-fill-mode CSS both kombiniert die Effekte von forwards und backwards. Dies bedeutet, den Stil des ersten Keyframe vor Beginn der Animation anzuwenden und den Stil des letzten Keyframe nach dem Ende der Animation beizubehalten.

Was passiert, wenn die Eigenschaft animation-fill-mode auf none gesetzt ist?

Wenn die CSS animation-fill-mode -Sache auf none eingestellt ist, wendet die Animation vor oder nach dem Beginn kein Stil auf das Element an. Elemente werden nur durch Animation w?hrend des aktiven Betriebs der Animation beeinflusst.

Kann ich mehrere Werte für das Attribut animation-fill-mode verwenden?

Nein, CSS animation-fill-mode Attribut kann jeweils nur einen Wert annehmen. Sie k?nnen aus none, forwards, backwards oder both gem?? den spezifischen Anforderungen der Animation ausw?hlen.

Alle Browser unterstützen animation-fill-mode Attribute?

CSS animation-fill-mode Eigenschaften werden in allen modernen Browsern, einschlie?lich Chrom, Firefox, Safari und Rand, h?ufig unterstützt. Es wird jedoch im Internet Explorer nicht unterstützt.

animation-fill-mode Wie interagieren Attribute mit animation-delay Attributen?

CSS animation-fill-mode Eigenschaften funktionieren mit animation-delay Eigenschaften. Wenn animation-fill-mode auf backwards oder both eingestellt ist und animation-delay vorhanden ist, wird der Stil des ersten Keyframe w?hrend der Verz?gerung angewendet.

animation-fill-mode K?nnen Attribute mit Keyframes mit prozentualen Werten verwendet werden?

Ja, das CSS animation-fill-mode -TRUTS kann mit Keyframes mit prozentualen Werten verwendet werden. Die Werte forwards und backwards wenden den Stil der n?chsten 0% bzw. 100% der Keyframes an.

animation-fill-mode Was ist der Standardwert des Attributs?

Der Standardwert des Attributs

CSS animation-fill-mode lautet none. Dies bedeutet, dass die Animation standardm??ig vor oder nach dem Start keinen Stil auf das Element anwendet.

Bitte beachten Sie, dass ich den Codepen -Link durch einen Platzhalter ersetzt habe. Sie müssen einen tats?chlichen Codepen -Demo -Link angeben, um den Artikel vollst?ndig zu machen.

Das obige ist der detaillierte Inhalt vonVerst?ndnis der CSS-Animations-Fill-Mode-Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!