Heim > Artikel > Web-Frontend > CSS3 erstellt Animationen über @keyframes
Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur einfachen Animationsimplementierung von CSS3 @keyframes vor. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.
Definition:
Animationen können über @keyframes-Regeln erstellt werden.
Animationen werden erstellt, indem nach und nach ein Satz von CSS-Stilen in einen anderen geändert wird.
Dieser Satz von CSS-Stilen kann während des Animationsprozesses mehrmals geändert werden.
Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen.
0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation.
Für eine optimale Browserunterstützung sollten immer 0 %- und 100 %-Selektoren definiert werden.
Wichtig: Kompatibilitätsproblem! @keyfrmes Nicht kompatibel mit IE 9 und früheren Browsern.
Syntax:
@keyframes animationname {keyframes-selector {css-styles;}}
Animationsname | Erforderlich. Definiert den Namen der Animation. | ||||||
keyframes-selector |
|
||||||
css -styles | Erforderlich. Eine oder mehrere zulässige CSS-Stileigenschaften. |
{ animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome, infinite表示无限次循环,也可设置次数n: animation-interation-count:n*/ }Verwenden Sie die mymove-Animationsmethode:
Selector
Zusammenfassung: @keyframes sind eng mit Animationen verbunden. Wenn Sie sie gründlich beherrschen möchten, müssen Sie lernen, wie man Animationen zusammen verwendet. Verwandte Empfehlungen:
Erstellen Sie animierte Google-Kartenmarkierungen basierend auf CSS und JavaScript_html/css_WEB-ITnose
jQuery Verwenden Sie animate Beispiele für die Verwendung von Animationen_jquery10 empfohlene Artikel über KeyframesDas obige ist der detaillierte Inhalt vonCSS3 erstellt Animationen über @keyframes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!