Zum Zweck der Verschönerung Ihres Webdesigns wird das Hinzufügen von Animationen dringend empfohlen. Animationen werden als reibungslose Verschiebung im Elementstil bezeichnet. Mit CSS können Sie verschiedene Elemente mit großer Leichtigkeit Animationen hinzufügen.

Wenn Sie Animationen auf verschiedene CSS -Elemente anwenden, müssen Sie einige Keyframes für die Animation angeben. Der @keyframes Regel gibt an, dass ein Element seinen gegenwärtigen Stil in die zu bestimmten Zeiten angegeben wird. Darüber hinaus müssen Sie einem bestimmten Element eine Animation anbringen, damit die Animation funktioniert.

Es gibt verschiedene CSS -Animationseigenschaften, die zum Zweck des Hinzufügens von Animationen zu verschiedenen CSS -Elementen verwendet werden. Wir haben diese Eigenschaften unten diskutiert.

CSS -Animationseigenschaften

CSS bietet verschiedene Animationseigenschaften, die nachstehend ausführlich erläutert werden.

Animationsname

Diese Eigenschaft wird verwendet, um einen Namen für die @KeyFrames zu definieren.

Syntax

Animationsname: Keine | Keyframenname | initial | erben;

Der Keyframenname Der Parameter definiert einen Namen für den Keyframe, den Sie an ein Element anhängen möchten.

Beispiel
Betrachten Sie das Beispiel unten, um zu verstehen, wie diese Eigenschaft funktioniert.

Html

Hallo Welt

Hier haben wir a definiert

Element, auf das wir den Animationseffekt anwenden werden.

CSS

P
Schriftgröße: 30px;
Position: Relativ;
Animationsname: Animation;
Animationsdauer: 5s;

@keyframes Animation
von links: 0px;
zu links: 200px;

Bevor Sie den Animationseffekt anwenden, haben wir zunächst die Schriftgröße und die Position des Absatzes festgelegt. Später haben wir den KeyFrames einen Namen zugewiesen und mithilfe der @KeyFrames -Regel definieren wir, dass die Animation den Absatz von 0px auf 200px von links bewegen lässt.

Beachten Sie, dass es wichtig ist, die Animationsdauer festzulegen, sonst funktioniert sie nicht.

Ausgang

Die Animation funktioniert richtig.

Animationsdauer

Diese Eigenschaft definiert die Zeit, die eine Animation benötigen sollte, um einen Zyklus zu beenden.

Syntax

Animationsdauer: Zeit | initial | erben;

Der Zeitparameter definiert die Zeit der Animation.

Beispiel
So können Sie die Dauer einer Animation festlegen.

Html

Wir haben einfach ein DIV -Element definiert.

CSS

div
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: Brown;
Position: Relativ;
Animationsname: Animation;
Animationsdauer: 3s;

@keyframes Animation
von links: 0px;
zu links: 200px;

Abgesehen vom Styling des Div -Containers haben wir die Animationsdauer auf 3 Sekunden festgelegt. Dies bedeutet, dass die Animation weiterhin 3 Sekunden lang spielt.

Ausgang

Die Animation wird 3 Sekunden lang gespielt.

Animation-Zelay

Diese Eigenschaft definiert die Wartezeit vor Beginn der Animation.

Syntax

Animation-Delay: Zeit | initial | erben;

Der Zeitparameter definiert die Wartezeit vor Beginn der Animation. Es ist jedoch optional.

Beispiel
Nehmen wir an, Sie möchten Ihre Animation 2 Sekunden lang verzögern und dann dem folgenden Code folgen.

CSS

div
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: Brown;
Position: Relativ;
Animationsname: Animation;
Animationsdauer: 5s;
Animation-Delay: 2s;

@keyframes Animation
von links: 0px;
zu links: 200px;

Der obige Code gibt an, dass der Div -Container nach einer Wartezeit von 2 Sekunden von links von links von 0px auf 200px wechselt.

Ausgang

Die Animation wurde 2 Sekunden lang verzögert und begann dann wie gewünscht.

Animations-Timing-Funktion

Diese Eigenschaft definiert die Beschleunigungskurve der Animation.

Syntax

Animations-Timing-Funktion: Easy | linear | Leichter | Leichtigkeit | Einleichterung in Out | Kubik-Bezier (N, N, N, N);

Alle Parameter werden unten erläutert.

• Leichtigkeit: Die Animation erfolgt langsam und schlägt.
• linear: Die Animation hat die gleiche Geschwindigkeit von Anfang bis Ende.
• Leichterung: Die Animation wird einen langsamen Anfang haben.
• Entlastung: Die Animation wird ein langsames Ende haben.
• Einleichterung: Die Animation wird einen langsamen Anfang sowie ein langsames Ende haben.
• Kubik-Bezier (N, N, N, N): Die Werte der Animation werden kubisch-fezier festgelegt.

Beispiel
Das folgende Beispiel zeigt den Parameter Easy der zu diskutierenden Eigenschaft.

CSS

div
Animationsname: Animation;
Animationsdauer: 5s;
Animations-Timing-Funktion: Leichtigkeit;

@keyframes Animation
von links: 0px;
zu links: 200px;

Wir haben den Wert der Animations-Timing-Funktion festgelegt, um zu lindern. Daher tritt die Animation langsam an, die langsam abfällt.

Ausgang

Die Animation spielt langsam und schläfrig.

Animationsveranstalter

Diese Eigenschaft definiert, wie oft eine Animation spielen wird.

Syntax

Animationsverarbeitungscount: Nummer | unendlich | initial | erben;

Der Zahlenparameter definiert die Häufigkeit, mit der eine Animation abgespielt wird. Der unendliche Parameter definiert, dass die Animation unendlich abgespielt wird.

Beispiel
Lassen Sie uns die Arbeit der Eigenschaft zur Animation-Operation-Count anhand des folgenden Beispiels verstehen.

CSS

div
Animationsname: Animation;
Animationsdauer: 5s;
Animationsverarbeitungszählung: 2;

@keyframes Animation
von top: 0px;
zu top: 100px;

Der obige Code definiert, dass die Animation den Div -Container von 0px auf 100px von oben für 5 Sekunden lang bewegt.

Ausgang

Die Animation wird doppelt so gespielt, wie im Code angegeben.

Animationsdirektion

Diese Eigenschaft definiert die Richtung, in die sich die Animation bewegt. Anweisungen können vorwärts, rückwärts sein oder zwischen beiden wechseln.

Syntax

Animationsleitung: Normal | umgekehrt | Alternative | Alternativ-Umkehr | Erben | Initial;

Alle Parameter werden unten erläutert.

• normal: Dies ist ein Standardparameter, der die Animation vorwärts abspielt.
• umkehren: Dieser Parameter spielt die Animation in umgekehrter Richtung ab.
• wechseln: Dieser Parameter spielt die Animation zuerst in Vorwärtsrichtung und dann in umgekehrter Richtung.
• alternativ-resverse: Dieser Parameter spielt die Animation zuerst in umgekehrter Richtung und dann in die Vorwärtsrichtung.

Beispiel
Das folgende Beispiel zeigt den alternativen Parameter der Animation-Regisseur-Eigenschaft.

Html

Hallo Welt

Wir haben eine Überschrift geschaffen.

CSS

H1
Farbe braun;
Position: Relativ;
Animationsname: Animation;
Animationsdauer: 3s;
Animationsveranstalter: Infinite;
Animationsdirektion: Alternativ-Umkehr;

@keyframes Animation
von links: 0px; Farbe braun;
zu links: 100px; Farbe Gelb;

Der obige Code besagt, dass sich die Überschrift unendlich 3 Sekunden lang von 0px auf 100px von links in einer alternativ-reversen Modemodie zwischen den Farben Braun und Gelb bewegen wird.

Ausgang

Die Animations-Regisseur-Eigenschaft wurde erfolgreich implementiert.

Animations-Fill-Mode

Diese Eigenschaft definiert den Stil eines Elements zu der Zeit, in der die Animation nicht abgespielt wird. Dies bedeutet, welchen Stil das Element entweder vor Beginn der Animation, nach Abschluss oder beides hat oder beides.

Syntax

Animations-Fill-Mode: Keine | vorwärts | rückwärts | Beide | Erben | Initial;

Alle Parameter werden unten erläutert.

• keiner: Dies ist ein Standardparameter, der dem Element entweder vor oder nach der Animation Stil verleiht.
• vorwärts: Dieser Parameter hält den Stil eines Elements, das durch den letzten Keyframe definiert ist.
• rückwärts: Dieser Parameter hält den Stil eines Elements, das durch den ersten Keyframe definiert ist, und hält diesen Stil während der Verzögerungszeit der Animation fest.
• beide: Dieser Parameter wechselt zwischen den Vorwärts- und Rückwärtsparametern.

Beispiel
Lassen Sie uns sehen, wie der Vorwärtsparameter funktioniert, indem wir dem folgenden Beispiel folgen.

Html

Wir haben einfach einen DIV -Behälter erstellt.

CSS

div
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: Brown;
Position: Relativ;
Animationsname: Animation;
Animationsdauer: 3s;
Animations-Fill-Mode: Forwards;

@keyframes Animation
von links: 0px;
zu links: 100px; Hintergrundfarbe: Gelb;

Im obigen Code haben wir die Eigenschaft Animations-Fill-Mode auf den Parameter weitergeleitet, daher behält der Div-Container den im letzten Keyframe angegebenen Stil bei, wenn die Animation gestoppt wird und nicht abgespielt wird.

Ausgang

Der DIV -Behälter hat eine gelbe Hintergrundfarbe, wenn die Animation gestoppt wird und nicht spielt.

Animationsspielstaat

Diese Eigenschaft definiert, ob die Animation ausgeführt oder innehalten wird.

Syntax

Animations-Play-State: Running | Pause | Erben | Initial;

Der Betrieb Parameter ist ein Standardwert, der angibt, dass die Animation ausgeführt wird, inzwischen die blättern Der Parameter gibt an, dass die Animation angehalten wird.

Beispiel
Nehmen wir an, Sie möchten eine Animation mithilfe der Immobilie des Animationsspielstaates innehalten. So machst du es.

CSS

div
Animationsname: Animation;
Animationsdauer: 3s;
Animationsspielstaat: Pause;

@keyframes Animation
von links: 0px;
zu links: 100px;

Der obige Code gibt an, dass die Animation eine Pause wird.

Ausgang

Die Animation wurde erfolgreich durchgeführt.

Animation

Dieses Eigentum ist ein Kurzeigeneignis für alle oben genannten Eigenschaften.

Syntax

Animation: ;

Beispiel
Betrachten Sie das Beispiel unten, um die Animationseigenschaft zu verstehen.

CSS

div
Animation: Animation 3s Infinite Alternative;

@keyframes Animation
von links: 0px; Hintergrundfarbe: Brown;
zu links: 200px; Hintergrundfarbe: Gelb;

Wir geben an, dass die Animation alternativ 3 Sekunden lang unendlich spielen wird.

Ausgang

Die Animationseigenschaft funktioniert ordnungsgemäß.

Abschluss

Animationen werden als allmähliche Veränderung im Stil eines Elements bezeichnet. CSS bietet verschiedene Animationseigenschaften, die wie folgt sind: Animationsname, Animationsdauer, Animation-Delay, Animations-Timing-Funktion, Animationsveranstalter, Animationsanleitung, Animations-Fill-Mode, Animations-Play-State, und Animation. Alle diese Eigenschaften werden verwendet, um das Verhalten des Animationseffekts auf verschiedene HTML -Elemente anzugeben. In diesem Leitfaden werden alle diese Eigenschaften mit Hilfe relevanter Beispiele erläutert.