CSS @keyframes-Regel

Definition und Verwendung

Durch die @keyframes-Regel können Sie Animationen erstellen.

Der Prinzip der Animation ist, eine CSS-Stilgruppe allmählich in eine andere Stilgruppe zu verwandeln.

Während des Animationsvorgangs können Sie dieses CSS-Stilset mehrmals ändern.

Verwenden Sie Prozente, um die Zeit der Veränderung zu bestimmen, oder verwenden Sie die Schlüsselwörter "from" und "to", was äquivalent zu 0% und 100% ist.

0% ist der Startzeitpunkt der Animation, 100% der Endzeitpunkt der Animation.

Tipp:Um die beste Browser-Unterstützung zu gewährleisten, sollten Sie stets die Selektoren 0% und 100% definieren.

Tipp:Verwenden Sie Animationseigenschaften, um das Erscheinungsbild der Animation zu steuern und die Animation mit einem Selektor zu binden.

Beachten Sie:!important-Regeln werden in Keyframes ignoriert (siehe letztes Beispiel auf dieser Seite).

Siehe auch:

CSS3-Tutorial:CSS3 Animation

Beispiel

Beispiel 1

Bewegen Sie das div-Element gleichmäßig nach unten:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Probieren Sie es selbst aus

Beispiel 2

Mehrere keyframe-Selektoren in einer Animation hinzufügen:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Probieren Sie es selbst aus

Beispiel 3

Mehrere CSS-Stile in einer Animation ändern:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

Probieren Sie es selbst aus

Beispiel 4

Mehrere CSS-Stile und mehrere keyframe-Selektoren:

@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;}
}

Probieren Sie es selbst aus

Beispiel 5

Beachten Sie:Wichtige Regeln werden in den Schlüsselbildern ignoriert:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* Wird ignoriert */
  to   {top: 200px;}
}

Probieren Sie es selbst aus

CSS-Syntax

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

Attributwert

Wert Beschreibung
animationname Erforderlich. Definiert den Namen der Animation.
keyframes-selector

Erforderlich. Der Prozentsatz der Animationsdauer.

Gültige Werte:

  • 0-100%
  • from (entspricht 0%)
  • to (entspricht 100%)
css-styles Erforderlich. Eine oder mehrere gültige CSS-Stilattribut.

Browser-Unterstützung

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-