CSS -Animation: Magie, die den Websites Vitalit?t und dynamisch

verleiht

CSS -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 {
    /* 結(jié)束樣式 */
  }
}</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 -Funktion

Schlü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.

Grammatik:

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; /* 動(dòng)畫名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}</code>

Animationsname

Animationsdauer

Animations-Timing-Funktion

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 動(dòng)畫名稱 */
   animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}
@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 {
    /* 結(jié)束樣式 */
  }
}</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:

Animation-Delay

Funktion:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}</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;  /* 動(dòng)畫名稱 */
   animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}
@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:

Dieses Attribut definiert die Animationsrichtung.

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.

Erm?glicht es Ihnen, das Erscheinungsbild des Elements vor und nach der Animation zu steuern, damit Sie bei der Verwaltung des Elementzustands w?hrend des Animationsprozesses flexibler sind.

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 {
    /* 結(jié)束樣式 */
  }
}</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; /* 動(dòng)畫名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}</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

CSS -Animationsgeschwindigkeitsprüfungstabelle

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: http://ipnx.cn/link/02f5df8adf026d38425594e68a007

Das war's.

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!