Detaillierte Erläuterung der Selektorbindung der @keyframes-Keyframe-Animation in CSS3

In CSS3 können wir Keyframe-Animationseffekte über @keyframes erstellen. Wir müssen @keyframes an den Selektor binden, sonst wird kein Effekt angezeigt. Gleichzeitig müssen wir auch die Animationsdauer und den Animationsnamen

Grammatik

@keyframes animationname {keyframes-selector {css-styles;}}

definieren

In CSS3 geben wir den Zeitpunkt an, zu dem die Änderung eintritt, in Prozent oder durch die Schlüsselwörter „from“ und „to“, die 0 % und 100 % entsprechen. . Dabei ist 0 % die Startzeit der Animation und 100 % die Endzeit der Animation.

Keyframe-Auswahl
Fügen wir einige Animationsregeln in @keyframes hinzu:

@keyframes sunrise {   
   0% {   
      bottombottom: 0;   
      left: 340px;   
      background: #f00;   
   }   
  
   33% {   
      bottombottom: 340px;   
      left: 340px;   
      background: #ffd630;   
   }   
  
   66% {   
      bottombottom: 340px;   
      left: 40px;   
      background: #ffd630;   
   }   
  
   100% {   
      bottombottom: 0;   
      left: 40px;   
      background: #f00;   
   }   
}

indem wir diese neuen Animationsregeln hinzufügen , haben wir den Keyframe-Selektor eingeführt. Im obigen Beispielcode sind 0 %, 33 %, 66 % und 100 % Keyframe-Selektoren. Unter diesen können 0 % und 100 % durch „von“ und „bis“ ersetzt werden.
Die vier Sätze von Animationsregeln im Beispiel drücken die vier Zustände (vier Schlüsselbilder) dieses animierten Elements und die Stile aus, wenn es sich in diesen vier Zuständen befindet. Diese undefinierten Zustände (z. B. von 34 % auf 65 %) stellen die Übergangszustände zwischen diesen definierten Zuständen dar.
Obwohl die Spezifikation noch überarbeitet wird, gibt es einige Regeln, die Benutzer dennoch einhalten sollten. Beispielsweise spielt die Reihenfolge, in der Keyframes geschrieben werden, keine Rolle, sie werden in aufsteigender prozentualer Reihenfolge abgespielt. Wenn Sie also den „Bis“-Keyframe vor dem „Von“-Keyframe platzieren, ändert sich die Wiedergabe der Animation nicht. Wenn Sie außerdem weder „bis“ noch „von“ oder den entsprechenden Prozentsatz angeben, fügt der Browser diese automatisch hinzu. Daher entspricht die Syntax von @keyframes nicht den kaskadierenden Abdeckungsregeln der allgemeinen CSS-Syntax.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Selektorbindung der @keyframes-Keyframe-Animation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!