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

animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

Erforderlich. Der Prozentsatz der Animationsdauer.

Zulässige Werte:

• @keyframes mymove
  {
      0%   {top:0px;}
      25%  {top:200px;}
      75%  {top:50px}
      100% {top:100px;}
  }
  
  @-webkit-keyframes mymove /* Safari and Chrome */
  {
      0%   {top:0px;}
      25%  {top:200px;}
      75%  {top:50px}
      100% {top:100px;}
  }
  //多个特性变化，用;隔开.
  
  @-webkit-keyframes mymove{
  
  0% {top:0px; left:0px; background:red;}
  25% {top:0px; left:100px; background:blue;}
  50% {top:100px; left:100px; background:yellow;}
  75% {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
  }

  0-100 %

• from( Gleiches als 0%)

• to (Das Gleiche wie 100%)

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 Keyframes

Das 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!