So richten Sie CSS-Animations-Keyframes ein

So Richten Sie Css Animations Keyframes Ein



Die HTML-Sprache stellt die Struktur der Webseite bereit, und CSS stellt das Design und die Formatierung dieser Anwendung bereit. Diese Kombination ermöglicht Ihnen auch das Hinzufügen von Animationen, da die animierten Elemente im Vergleich zu statischen Elementen attraktiver aussehen. Außerdem kann ein Element seinen Stil allmählich ändern.

In diesem Artikel erfahren Sie, wie wir Animationen auf die Elemente anwenden können. Fangen wir also an!







Was sind CSS-Animations-Keyframes?

Um die Animation fertigzustellen, müssen wir die Animation an das HTML-Element binden. Verwenden Sie dazu das Schlüsselwort „ @Keyframes “, gefolgt vom Namen der Animation. Diese Komponente gibt den Start und das Ende der Animation an.



Wie richte ich CSS-Animations-Keyframes ein?

Um Animations-Keyframes in CSS einzurichten, werden wir zwei Beispiele durchgehen.



Beispiel 1





Führen Sie zum Einrichten von Animations-Keyframes in CSS die folgenden Schritte aus:

    • Fügen Sie ein
      mit dem Klassennamen „ Haupt-Div “.
    • Fügen Sie innerhalb des div ein weiteres div mit dem Klassennamen „ img-peng “.
    • Fügen Sie innerhalb dieses img-peng div hinzu, um das Bild zu platzieren. Dieses Tag hat drei Attribute, das „ Quelle ”-Attribut, um den Bildpfad bereitzustellen, “ alles “ ist der alternative Text, der hinzugefügt wird, wenn das Bild nicht angezeigt wird, und das „ Breite ”-Attribut, um die Breite des Bildes anzugeben.

HTML



< div Klasse = 'main-div' >
< div Klasse = 'img-peng' >
< Bild Quelle = 'images/pinguin.png' alles = 'Pinguin' Breite = '100' >
div >
div >


CSS

.main-div {
Breite: 90 % ;
Höhe: 90px;
Hintergrundfarbe: rgb ( 67 , 66 , 87 ) ;
Rand: 20px automatisch;
Polsterung: 10px;
}


Im CSS ist das „ .main-div “ wird hinzugefügt, um auf die div-Klasse zuzugreifen. Die darauf angewendeten Eigenschaften werden im Folgenden erläutert:

    • Breite ” Eigenschaftswert definiert die Breite des div.
    • Höhe ”-Eigenschaft wird verwendet, um die Höhe des div festzulegen.
    • Hintergrundfarbe ”-Eigenschaft wendet Farbe auf den Hintergrund des Elements an.
    • Rand “ ist eingestellt als „ 20px Auto “, was den Abstand von oben und unten angibt, und auto bedeutet gleicher Abstand von links und rechts.
    • Polsterung ” Eigenschaftswert wird als 10px zugewiesen, was einen Abstand um den Inhalt des Elements anwendet.

Stil img-peng-Klasse

.img-peng {
Breite: 50px;
Höhe: 100px;
Position: relativ;
Animation: Schütteln;
Animationsdauer: 2s;
Animations-Timing-Funktion: 2s;
Anzahl der Animations-Iterationen: unendlich;
}


Das ' .img-peng “ wird verwendet, um auf die div-Klasse zuzugreifen, die in der obigen HTML-Datei erwähnt wird. Dieses div-Element ist mit den unten beschriebenen Eigenschaften gestaltet:

    • Breite ” Eigenschaftswert wird verwendet, um die Breite des Elements festzulegen.
    • Höhe ”-Eigenschaftswert wird verwendet, um die Höhe des Elements festzulegen.
    • Position „Eigenschaft wird der Wert zugewiesen“ relativ “, was bedeutet, dass es relativ zu seiner normalen Position positioniert wird.
    • Animation „Name wird angegeben als“ Shake “. Sie können die Animation jedoch entsprechend der Anforderung benennen.
    • Animationsdauer “ stellt die Dauer der Animation dar, die 2 Sekunden beträgt.
    • Animation-Timing-Funktion ” wird ein Wert von 2s zugewiesen, was bedeutet, dass die Animation in 2 Sekunden abgeschlossen ist.
    • Anzahl der Animations-Iterationen “ ist auf unendlich eingestellt, was bedeutet, dass diese Animation in unendlicher Zeit stattfinden wird.

Definieren Sie @keyframes mit to und from Schlüsselwörtern

@ Keyframes wackeln {
aus {
oben: 50px;
}

zu {
Rand unten: 200px;
}
}


Die Beschreibung der für das Bild festgelegten Animations-Keyframes ist unten aufgeführt:

    • @keyframes schütteln “ bezieht sich auf den Animationsnamen Shake, gefolgt vom Schlüsselwort @keyframes. Innerhalb dieser Regel wird das Verhalten der Animation festgelegt.
    • In seinen geschweiften Klammern steht das „ aus ' und ' zu ”-Schlüsselwörter geben unterschiedliche Intervalle an, um das Animationsverhalten zu definieren.
    • Das ' oben ” wird der Wert 50px zugewiesen, was bedeutet, dass die Animation bei 50px vom oberen Rand des Bildschirms beginnt und bis zu den 200px am unteren Rand fortgesetzt wird.

Als Ergebnis sehen Sie die folgende Ausgabe:


Lassen Sie nun die Animation sich in verschiedenen Intervallen unterschiedlich verhalten. Verwenden Sie dazu die Animationsprozentsätze in den @keyframes.

Geben Sie @keyframes mit Prozentwerten an

@ Keyframes wackeln {
0 % {
links: -50px ;
}

25 % {
links: 50px;
}

fünfzig % {
links: -25px ;
}

75 % {
links: 25px;
}

100 % {
links: 10px;
}
}


Die Beschreibung des obigen Code-Snippets wird hier also erwähnt:

    • Die Prozentwerte 0 %, 25 %, 50 %, 75 % und 100 % repräsentieren die Animation in unterschiedlichen Intervallen.
    • Außerdem wird bei 0 % der Platz links vom Bild „ -50px “. Bei 25 % ist der Abstand links „ 50px “. Bei 50 % ist der Abstand links „ -25px “. Bei 75 % ist der verbleibende Platz „ 25px “, und wenn die Animation abgeschlossen ist (100 %), ist der linke Raum „ 10px “.

Der obige Code zeigt die folgende Animation:


Nehmen wir ein weiteres Beispiel, um zu sehen, wie wir Animationen für die Bilder festlegen können.

Beispiel 2

Fügen Sie in HTML ein

mit dem Klassennamen „ Hauptseite “. Platzieren Sie innerhalb dieses
-Elements zwei weitere div-Tags mit Klassen „ Wolke1 ' und ' Wolke2 ', beziehungsweise.

HTML

< div Klasse = 'Hauptseite' >
< div Klasse = 'Wolke1' > div >
< div Klasse = 'Wolke2' > div >
div >


CSS

Karosserie {
Rand: 0 ;
Polsterung: 0 ;
}


In CSS weisen wir dem body-Element die folgenden CSS-Eigenschaften zu:

    • Rand ”-Eigenschaft als 0 gibt keinen Abstand um das Element an.
    • Polsterung ”-Eigenschaft mit dem Wert 0 gibt kein Leerzeichen um den Inhalt des Elements an.

Stil Hauptseite div

.Hauptseite {
Hintergrundbild: URL ( / Bilder / wolf-nacht.png ) ;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: Cover;
Höhe: 100vh;
Position: relativ;
Überlauf versteckt;
}


Hier:

    • .Hauptseite “ wird verwendet, um auf die div-Klasse zuzugreifen.
    • Hintergrundbild „Eigenschaft wird der Wert zugewiesen“ url(/images/wolf-night.png) ” wobei images der Ordner ist, der das Bild wolf-night.png enthält.
    • Hintergrund Wiederholung „Eigenschaft wird der Wert zugewiesen“ keine Wiederholung , was bedeutet, dass das Bild einmal angezeigt wird.
    • Hintergrundgröße “ ist als „ Startseite “, um das gesamte div-Element zu füllen.
    • Höhe “ ist 100 vh, was 100 % der Höhe des Ansichtsfensters entspricht.
    • Position ” als relativ setzt die Bildposition relativ zu seiner aktuellen Position.
    • Überlauf “ Der Wert der Eigenschaft wird auf „versteckt“ gesetzt, um den Teil des Bildes auszublenden, der zu groß ist, um in den Container zu passen.

Style cloud1-Klasse

.cloud1 {
Hintergrundbild: URL ( / Bilder / Wolke.png ) ;
Hintergrundgröße: enthalten;
Hintergrundwiederholung: keine Wiederholung;
Position: absolut;
oben: 100px;
Breite: 500px;
Höhe: 300px;
Animation: Wolkenanimation1;
Animationsdauer: 70s;
Anzahl der Animations-Iterationen: unendlich;
}


Die div-Klasse cloud1 wird mit den folgenden erklärten Eigenschaften angewendet:

    • .cloud1 “ wird verwendet, um auf die div-Klasse cloud1 zuzugreifen.
    • Hintergrundbild ”-Eigenschaft wird als url(/images/cloud.png) festgelegt, wobei images der Ordner ist, der das Bild cloud.png enthält.
    • Hintergrundgröße „mit dem Wert“ enthalten “ sorgt für die Sichtbarkeit des Bildes.
    • Hintergrund Wiederholung ” Eigenschaft mit dem Wert festgelegt als “ keine Wiederholung “ zeigt das Bild als nicht wiederholt an.
    • Position “ als absolut positioniert das Bild relativ zum übergeordneten Element.
    • oben ”-Eigenschaft setzt das Bild auf 100 Pixel von oben.
    • Breite “-Eigenschaft wird verwendet, um die Breite des div-Elements auf 500 Pixel festzulegen.
    • Höhe “-Eigenschaft wird verwendet, um die Höhe des div-Elements auf 300 Pixel festzulegen.
    • Animation “ erhält den Namen cloudanimation1.
    • Animationsdauer “ stellt die Dauer der Animation dar, die 70 Sekunden beträgt.
    • Anzahl der Animations-Iterationen “ wird der Wert unendlich zugewiesen, wodurch die Animation unendlich oft wiederholt wird.

Bisher haben wir die CSS-Eigenschaften auf die div-Klasse main-page und cloud1 angewendet. Im nächsten Abschnitt gestalten wir nun die nächste div-Klasse mit dem Namen cloud2.

Style cloud2-Klasse

.cloud2 {
Hintergrundbild: URL ( / Bilder / Wolke.png ) ;
Hintergrundgröße: enthalten;
Hintergrundwiederholung: keine Wiederholung;
Position: absolut;
oben: 50px;
Breite: 200px;
Höhe: 300px;
Animation: Wolkenanimation2;
Animationsdauer: 15s;
Anzahl der Animations-Iterationen: unendlich;
}


Die div-Klasse cloud2 wird mit den unten erläuterten Eigenschaften angewendet:

    • .cloud2 “ wird verwendet, um auf die Klasse cloud2 zuzugreifen.
    • Hintergrundbild “-Eigenschaft wird als url(/images/cloud.png) festgelegt, wobei das Bild ein Ordner ist, der das Bild cloud.png enthält.
    • Hintergrundgröße ” enthält einen Wert, der die Sichtbarkeit des Bildes sicherstellt.
    • Hintergrund Wiederholung ”-Eigenschaft mit dem Wert No-Repeat zeigt das Bild als Non-Repeat an.
    • Position “ als absolut positioniert das Bild relativ zum übergeordneten Element.
    • oben ”-Eigenschaft setzt das Bild auf 100 Pixel von oben.
    • Breite ”-Eigenschaft wird verwendet, um die Breite des div-Elements festzulegen.
    • Höhe ”-Eigenschaft wird verwendet, um die Höhe des div-Elements festzulegen.
    • Animation “ erhält den Namen cloudanimation2.
    • Animationsdauer “ steht für die Dauer der Animation.
    • Anzahl der Animations-Iterationen “ wird der Wert unendlich zugewiesen, wodurch die Animation unendlich oft wiederholt wird.

Geben Sie @keyframes für cloudanimation1 an

@ Keyframes Cloudanimation1 {
zu {
links: 0px;
}

aus {
links: 100 % ;
}
}


Das cloud1 div ist mit einer Animation verbunden, die unten beschrieben wird:

    • @keyframes cloudanimation1 ” Auf den Namen der Animation cloudanimation1 folgt das Schlüsselwort @keyframes, mit dem der Übergang angegeben wird.
    • Das Schlüsselwort @keyframes gibt an, wie die Animation von Anfang bis Ende auf den Wolkenbildern ausgeführt wird.
    • Das ' zu ' und ' aus ” Schlüsselwörter geben an, dass die Wolke1 von 100% auf 0px des Bildschirms verschoben wird.

Geben Sie @keyframes für cloudanimation2 an

@ Keyframes Cloudanimation2 {
0 % {
links: 0 % ;
}

100 % {
links: 100 % ;
}
}


Die div-Klasse cloud2 ist mit der unten erläuterten Animation verknüpft:

    • @keyframes cloudanimation2 ” stellt den Animationsnamen cloudanimation2 dar, gefolgt vom Schlüsselwort @keyframes, das verwendet wird, um die Animation anzugeben.
    • Das ' 0% ' und ' 100% “ stellen den Anfang und das Ende der Animation dar.
    • Bei 0 % der Animation würde sich die Wolke mit dem auf 0 % eingestellten Wert auf der linken Seite befinden und sich allmählich auf 100 % der Breite bewegen.

Ausgabe


Das ist cool! Wir haben besprochen, wie wir mit dem Schlüsselwort @keyframes erfolgreich eine Animation für die Elemente spezifizieren können.

Fazit

CSS erlaubt es uns, Stile auf HTML-Elemente anzuwenden. Die Animation in CSS führt Übergänge von einem Stil zum anderen durch. Es besteht aus zwei Komponenten, den Animationsstilen und den Keyframes. Animationsstile stellen verschiedene Eigenschaften dar, z. B. ihren Namen, die Animationsdauer, die Anzahl der Animationsiterationen und mehr. Während die Keyframe-Komponente den Anfang und das Ende der Animation definiert. In diesem Handbuch wurde anhand von Beispielen erläutert, wie Sie Animations-Keyframes einrichten.