Was sind @keyframes von CSS3?

Der Inhalt dieses Artikels besteht darin, Ihnen vorzustellen, was @keyframes von CSS3 sind, damit Sie einfach verstehen können, wie @keyframes verwendet werden können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Was sind CSS3 @keyframes? Was ist der Nutzen?

@keyframes ist eine Regel von CSS3, mit der das Verhalten eines Zeitraums von CSS-Animationen definiert und einfache Animationen erstellt werden können. [Empfohlene verwandte Video-Tutorials: CSS3-Tutorial]

Animationen ähneln Übergängen insofern, als sie beide Werte darstellen, die CSS-Eigenschaften im Laufe der Zeit ändern. Der Hauptunterschied besteht darin, dass der Übergang implizit ausgelöst wird, wenn sich der Eigenschaftswert ändert (z. B. wenn sich der Eigenschaftswert beim Schweben ändert), die Animation jedoch explizit ausgeführt wird, wenn die animierte Eigenschaft angewendet wird. Daher müssen Animationen explizite Werte für animierte Eigenschaften anzeigen. Diese Werte werden durch die in der @keyframes-Regel angegebenen Animations-Keyframes definiert. Daher besteht die @keyframes-Regel aus einer Reihe gekapselter CSS-Stilregeln, die beschreiben, wie sich Eigenschaftswerte im Laufe der Zeit ändern.

Anschließend können Sie mithilfe verschiedener CSS-Animationseigenschaften viele verschiedene Aspekte der Animation steuern, einschließlich der Anzahl der Iterationen der Animation, ob sie zwischen Start- und Endwerten wechselt und ob die Animation ausgeführt oder angehalten werden soll . Animationen können auch ihre Startzeit verzögern.

Eine @keyframe-Regel besteht aus dem Schlüsselwort „@keyframe“, gefolgt von einer Kennung, die den Namen der Animation angibt (auf die mit „animation-name“ verwiesen wird), gefolgt von einer Reihe von Stilregeln (getrennt durch geschweifte Klammern). Die Animation wird dann auf das Element angewendet, indem der Bezeichner als Wert des Attributs „animation-name“ verwendet wird. Zum Beispiel:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Was steht in den geschweiften Klammern der @keyframes-Regel?

Innerhalb der geschweiften Klammern müssen wir Keyframes oder Wegpunkte definieren, die den Wert der Eigenschaft angeben, die an einem bestimmten Punkt während der Animation animiert wird. Dadurch können wir Zwischenschritte in der Animationssequenz steuern. Ein einfacher animierter @keyframe kann beispielsweise so aussehen:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

Laufende Effekte:

'0%', '50%', '100 % ' sind alle Keyframe-Selektoren, jeder Selektor definiert eine Keyframe-Regel. Der Keyframe-Deklarationsblock einer Keyframe-Regel besteht aus Attributen und Werten.

Die obige Animation ähnelt einem einfachen Übergangseffekt: Die Hintergrundfarbe ändert sich ausgehend von einem Wert (0 %) zu Beginn der Animation, erreicht einen Wert (50 %) in der Mitte und erreicht einen anderen Wert ( 100) am Ende der Animation %). Die Keyframe-Selektoren „0 %, „50 %“ und „100 %“ definieren die Wegpunkte oder Prozentpunkte, an denen die animierte Eigenschaft ihren Wert ändern soll. Wir können auch die Selektorschlüsselwörter from, to anstelle von 0 % bzw. 100 % verwenden, sie sind gleichwertig.

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    	background-color: red;
    }
}

Der Keyframe-Selektor besteht aus einem oder mehreren durch Kommas getrennten Prozentwerten oder den Schlüsselwörtern „von“ und „bis“. Beachten Sie, dass für Prozentwerte der Einheitenbezeichner „Prozent“ verwendet werden muss. Daher ist „0“ ein ungültiger Keyframe-Selektor.

Das Folgende ist ein Beispiel einer Animation mit einem Keyframe-Selektor, der mehrere durch Kommas getrennte Prozentwerte und/oder die Schlüsselwort-Keyframe-Selektoren von und bis enthält.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

Die @keyframes-Regel oben definiert: Der obere Versatz des Elements ist zu Beginn, in der Mitte und am Ende der Animation gleich Null und bei eins gleich Null -viertel und dreiviertel des Weges 100px Dies bedeutet, dass sich das Element während der Animationsschleife mehrmals auf und ab bewegt.

Ein Beispiel für die Erstellung einer einfachen Animation mit @keyframes-Regeln:

1 Definieren Sie den Raum, in dem die Animation stattfindet

HTML-Code:

<div class="container">
  <div class="element"></div>
</div>

2. Verwenden Sie @keyframes-Regeln, um einfache Animationen zu erstellen

CSS-Code

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}

.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

3. Laufeffekt

Im obigen Beispiel sind der Animation mit dem Namen „bounce“ fünf Keyframes zugeordnet. Verwenden Sie zwischen dem ersten und zweiten Keyframe (d. h. zwischen „0 %“ und „25 %“) die Ease-Out-Timing-Funktion. Verwenden Sie zwischen dem zweiten und dritten Keyframe (d. h. zwischen „25 %“ und „50 %“) die Easy-In-Timing-Funktion usw. Der Effekt tritt auf, wenn sich das Element um 50 Pixel nach oben bewegt. Es verlangsamt sich, wenn es seinen höchsten Punkt erreicht, und beschleunigt sich dann, wenn es wieder auf 150 Pixel zurückfällt. Die zweite Hälfte der Animation funktioniert auf ähnliche Weise, verschiebt das Element jedoch nur um 25 Pixel nach oben. Diese Animation erzeugt einen Hüpfeffekt, der zur Simulation einer springenden Ballanimation verwendet werden kann.

Hinweis:

@keyframes-Regeln werden nicht kaskadiert; daher werden Animationen niemals Keyframes von mehreren @keyframes-Regeln ableiten.

Um den Satz von Keyframes zu bestimmen, müssen alle Werte im Selektor nach zunehmender Zeit sortiert werden. Wenn es Duplikate gibt (z. B. wenn wir zwei „50 %“-Keyframe-Regeln und einen Deklarationsblock geschrieben haben), legt die @keyframes-Regel fest, dass der letzte Keyframe verwendet wird, um Keyframe-Informationen für diesen Zeitraum bereitzustellen. @keyframes Wenn mehrere Keyframes denselben Keyframe-Auswahlwert angeben, gibt es in der Regel keine Kaskadierung.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWas sind @keyframes von CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!