CSS- @keyframes- Regel
Beispiel
Lassen Sie ein Element schrittweise 200 Pixel nach unten verschieben:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die @keyframes
Regel gibt den Animationscode an.
Die Animation wird erstellt, indem schrittweise von einem Satz von CSS-Stilen zu einem anderen gewechselt wird.
Während der Animation können Sie den Satz von CSS-Stilen viele Male ändern.
Geben Sie an, wann die Stiländerung in Prozent oder mit den Schlüsselwörtern "von" und "bis" erfolgen wird, was mit 0 % und 100 % identisch ist. 0 % ist der Beginn der Animation, 100 % ist das Ende der Animation.
Tipp: Für eine optimale Browserunterstützung sollten Sie immer sowohl den 0 %- als auch den 100 %-Selektor definieren.
Hinweis: Verwenden Sie die Animationseigenschaften, um das Erscheinungsbild der Animation zu steuern und die Animation an Selektoren zu binden.
Hinweis: Die !important-Regel wird in einem Keyframe ignoriert (siehe letztes Beispiel auf dieser Seite).
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Regel vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
@keyframes | 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- |
CSS-Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
Eigenschaftswerte
Value | Description |
---|---|
animationname | Required. Defines the name of the animation. |
keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
css-styles | Required. One or more legal CSS style properties |
Mehr Beispiele
Beispiel
Fügen Sie viele Keyframe-Selektoren in einer Animation hinzu:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Beispiel
Ändern Sie viele CSS-Stile in einer Animation:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Beispiel
Viele Keyframe-Selektoren mit vielen CSS-Stilen:
@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;}
}
Beispiel
Hinweis: Die !important-Regel wird in einem Keyframe ignoriert:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Verwandte Seiten
CSS-Tutorial: CSS-Animationen