Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

高洛峰
Freigeben: 2017-03-09 10:10:24
Original
2837 Leute haben es durchsucht

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;}}
Nach dem Login kopieren

definieren

描述
animationname必需。定义动画的名称。
keyframes-selector必需。动画时长的百分比。


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;   
   }   
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage