Verständnis der CSS-Animations-Fill-Mode-Eigenschaft

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!