Heim >Web-Frontend >CSS-Tutorial >Mastering CSS grundlegender Animationskonzepte
Mastering CSS grundlegender Animationskonzepte
- Mary-Kate OlsenOriginal
- 2025-01-25 16:07:07232Durchsuche
CSS -Animation: Magie, die den Websites Vitalität und dynamisch
verleihtCSS -Animation ist wie Magie, die die Website energischer und attraktiver macht. Durch die Animation können Sie die Website -Elemente problemlos verschieben, ihre Farbe ändern und ihre Größe reibungslos anpassen.
Um Ihre Animation interaktiver und reibungsloser zu gestalten, müssen Sie zunächst das grundlegende Animationskonzept verstehen. In diesem Artikel lernen Sie die Grundregeln und Animationsattribute der Animation kennen, um das Verhalten der Animation zu kontrollieren.
Beginnen wir! ?
Um die CSS -Animation zu verwenden, müssen Sie zwei grundlegende Komponenten verstehen:
- @keyframes: Die Blaupause der Animation. Animationsattribute:
- steuern Sie die Einstellung der Animation. @keyframes
@KeyFrames ist eine Animations -Roadmap.
Dies bedeutet, dass dieser Teil definiert, wie die Animation beginnt, wie man in der Mitte läuft und wie die Animation endet.
Grammatik:
Zum Beispiel:
<code>@keyframes animationName {
from {
/* 开始样式 */
}
to {
/* 结束样式 */
}
}</code>
In diesem Beispiel beginnt die Deckkraft des Elements von 0 und dann auf 1.
Bevor Sie fortfahren, überprüfen Sie bitte dieses E -Book, das Sie zu einem CSS -Animationsexperten macht:<code>@keyframes fadeIn {
from {
opacity: 0; /* 不可见 */
}
to {
opacity: 1; /* 可见 */
}
}</code> ?
vom einfachen Ausblenden bis zum komplexen Animation deckt dieses E -Book alles ab, um die CSS -Animation zu beherrschen, einschließlich:
Timing -FunktionSchlüsselrahmen und Animationsprozess
Leistungsoptimierung
Die Anwendung der realen Welt- Entwickler, die eine reibungslose CSS -Animation erstellen möchten. Holen Sie sich Ihre Kopie sofort!
- Animationsattribute
- Um die CSS -Animation anzupassen, werden verschiedene Attribute verwendet.
- Das Animationsattribut wird direkt auf das Element angewendet und definiert den Namen, die Dauer, die Verzögerung, die Richtung usw. der Animation.
Zum Beispiel:
In diesem Beispiel wird die Elemente mit dem Namen "Box" zuerst sichtbar sein und nach zwei Sekunden sichtbar sein, was einen reibungslosen und ausgehenden Effekt erzeugt.
In CSS haben Sie die folgenden Animationsattribute:
<code>.element {
animation-name: fadeIn; /* 动画名称或@keyframes */
animation-duration: 2s; /* 动画持续时间 */
}</code> Animationsname Animationsdauer
Animations-Timing-Funktion<code>.box {
height: 100px;
width: 100px;
background-color: rgb(44, 117, 117);
animation-name: fadeIn; /* 动画名称 */
animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
from {
opacity: 0; /* 不可见 */
}
to {
opacity: 1; /* 可见 */
}
}</code>
Animation-Delay
Animation-Operation-Count
- Animation-Richtung
- Animations-Fill-Mode
- Animation-Play-State
- Lassen Sie uns jetzt jedes Attribut verstehen.
- Animationsname
- Funktion:
- Dieses Attribut wird verwendet, um zu definieren, welche @KeyFrames -Animation angewendet werden soll.
- Wenn Sie beispielsweise zwei @keyframes namens Fadein oder Fadeout haben, können Sie die Eigenschaftsdefinition von Animationsname verwenden, welches Element Fadein-Animation anwenden soll, in welchem Element.
Grammatik:
Zum Beispiel:
Attribut für Animationsname ist für das Ausführen von Animation erforderlich.
Animationsdauer
Funktion:
Dieses Attribut definiert die Dauer der Animation, dh wie lange die Animation ausgeführt wird.
Sie können die Animationsdauer als Einheit in Sekunden (n) oder Millisekunden (MS) definieren.
Grammatik:
<code>@keyframes animationName {
from {
/* 开始样式 */
}
to {
/* 结束样式 */
}
}</code> Zum Beispiel: Wenn Sie nicht mit der Animationsdauer definiert sind, wird automatisch auf 0s (Standardwert) festgelegt, was dazu führt, dass die Animation fehlschlägt.
<code>@keyframes fadeIn {
from {
opacity: 0; /* 不可见 */
}
to {
opacity: 1; /* 可见 */
}
}</code>
Animations-Timing-Funktion Funktion:
Dieses Attribut wird verwendet, um den Geschwindigkeitsmodus der Animation zu definieren. Dies bedeutet, dass Sie dieses Attribut verwenden können, um festzustellen, ob die Animation langsam ist, mit konstanter Geschwindigkeit ausführen oder schnell ausführen.
Es hat die folgenden Werte:
linear: Die Animation wird mit konstanter Geschwindigkeit ausgeführt.
Leichtigkeit: Beginnen Sie langsam, schnell in der Mitte und enden Sie langsam.
- Eventual-In: Beginnen Sie langsam.
- Easy-Out: Langsam enden.
- Eventual-Out: Starten Sie langsam und enden Sie langsam.
- Kubik-Bezier (x1, y1, x2, y2): benutzerdefinierter Geschwindigkeitsmodus.
- Beispiel:
Funktion:
<code>.element {
animation-name: fadeIn; /* 动画名称或@keyframes */
animation-duration: 2s; /* 动画持续时间 */
}</code> Wie lange wird diese Attributdefinitionsanimation vor dem Start warten, dh die Verzögerung der Animation. Grammatik:
Beispiel:
Animation-Operation-Count
Funktion:<code>.box {
height: 100px;
width: 100px;
background-color: rgb(44, 117, 117);
animation-name: fadeIn; /* 动画名称 */
animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
from {
opacity: 0; /* 不可见 */
}
to {
opacity: 1; /* 可见 */
}
}</code> Dieses Attribut wird verwendet, um die wiederholte Anzahl von Animationen zu definieren, dh wie oft die Animation wiederholt wird.
Es hat die folgenden Werte:<code>animation-name: animationName;</code>
1: Die Animation wird nur einmal ausgeführt (dies ist der Standardwert).
Infinite: Die Animation wird wiederholt.
eine beliebige Nummer: Die Animation wird so ausgeführt, wie oft Sie definiert sind.
Beispiel:
- Animation-Richtung
- Funktion:
Es hat die folgenden Werte:
<code>animation-name: fadeIn;</code>Normal: Die Animation läuft weiter (dies ist der Standardwert).
umgekehrt: Die Animation wird umgekehrt ausgeführt.
Alternative: Die Animation wird abwechselnd ausgeführt, ein einmal vorwärts.
Alternativ-Umkehr: Die Animation wird zuerst in der Rückseite ausgeführt und dann vorwärts rennen.
Beispiel:
- Animations-Fill-Mode
- Funktion:
- Dieses Attribut wird verwendet, um den Elementstil vor und nach Beginn der Animation zu definieren. Es definiert, welche Stile auf Elemente angewendet werden sollen, wenn die Animation nicht gespielt wird.
Es hat die folgenden Werte:
<code>animation-duration: time;</code>Keine: Vor und nach der Animation wird kein Stil verwendet.
Vorwärts: Halten Sie das Ende der Animation.
rückwärts: Dies wendet auch den Startstil der Animation innerhalb der Verzögerungszeit an.
BEIDE: Behandlung zum Start und Ende.
Beispiel:
- Animation-Play-State
- Funktion:
- Dieses Attribut gibt den Status der Animation an: Ausführen oder Pause.
- Es hat die folgenden Werte:
- Laufen: Die Animation wird fortgesetzt.
- Pause: Die Animation wird aufhören, aber sie wird beibehalten.
Beispiel:
<code>@keyframes animationName {
from {
/* 开始样式 */
}
to {
/* 结束样式 */
}
}</code> Dieses Attribut wird für die interaktive Animation verwendet, z. B. das Aushängung der Animation beim Schweben. Animation Kurzliktionsgeschwindigkeit
Mit
Animationsabkürzung können Sie mehrere Animationsattribute in einer Zeile definieren. Sie können sie in eine Zeile kombinieren, um die Lesbarkeit zu verbessern, anstatt jedes Animationsattribut einzeln zu schreiben.Grammatik:
Beispiel:
<code>@keyframes fadeIn {
from {
opacity: 0; /* 不可见 */
}
to {
opacity: 1; /* 可见 */
}
}</code> hier,
<code>.element {
animation-name: fadeIn; /* 动画名称或@keyframes */
animation-duration: 2s; /* 动画持续时间 */
}</code> Folie: Der Name der Animation. 3s: Die Animationsdauer beträgt 3 Sekunden.
- Easy-In-Out: Die Timing-Funktion ist Leichtigkeit, was bedeutet, dass die Animation langsam beginnt, beschleunigt und dann wieder langsamer wird.
- 1s: Die Animation beginnt nach 1 Sekunde Verzögerung.
- unendlich: Die Animation wird unendlich wiederholt.
- Alternative: Die Animation wechselt in jeder Iteration zwischen vorwärts und rückwärts.
- Vorwärtsforschung: Nach Abschluss der Animation wird der Stil des letzten Schlüsselrahmens (zu 100%) beibehalten.
- Animationsgeschwindigkeitsprüfungstabelle
- Ich habe eine umfassende
erstellt, die alle Schlüsselkonzepte, Attribute und Grammatik in der CSS -Animation abdeckt.
Sie können die Geschwindigkeit auf GitHub herunterladen, indem Sie auf den Link unten klicken, um die Tabelle zu überprüfen:
Ich hoffe, es wird Ihnen helfen.
Danke fürs Lesen.
Wenn Sie der Meinung sind, dass mein Artikel hilfreich ist und meine Arbeit unterstützen möchte, sollten Sie mich bitte auffordern, eine Tasse Kaffee zu trinken.
Klicken Sie hier hier.
Folgen Sie mir auf X (Twitter) und erhalten Sie tägliche Webentwicklungsfähigkeiten.
Codieren weiter! Überschneidung
Das obige ist der detaillierte Inhalt vonMastering CSS grundlegender Animationskonzepte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!