Beispiel
Machen Sie ein Element allmählich 200px nach unten bewegen:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die @keyframes Regel gibt die Animation Code.
Die Animation wird durch die schrittweise von einem Satz von CSS-Stile zu einem anderen gewechselt erstellt.
Während der Animation können Sie den Satz von CSS-Stile ändern viele Male.
Geben Sie, wenn die Stiländerung in Prozent, oder mit den Suchbegriffen passieren wird "from" und "to" , die die gleiche wie 0% und 100% liegt. 0% ist der Beginn der Animation, 100% ist, wenn die Animation abgeschlossen ist.
Tipp: Für beste Browser - Unterstützung, sollten Sie immer definieren sowohl die 0% und die 100% Selektoren.
Note: Verwenden Sie die Animationseigenschaften das Erscheinungsbild der Animation zu steuern und auch die Animation zu Selektoren zu binden.
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die die Regel vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| @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
@keyframesanimationname {keyframes-selector {css-styles;}}Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| animationname | Erforderlich. Definiert den Namen der Animation. |
| keyframes-selector | Erforderlich. Prozentsatz der Animationsdauer. Zulässige Werte: 0-100% Note: Sie viele Keyframes-Selektoren in einer Animation haben. |
| css-styles | Erforderlich. Eine oder mehrere Rechts CSS-Stileigenschaften |
Mehr Beispiele
Beispiel
In vielen Keyframe-Selektoren in einer Animation:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Versuch es selber " Beispiel
Ändern Sie viele CSS-Stile in einer Animation:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Versuch es selber " Beispiel
Viele Keyframe-Selektoren mit vielen CSS-Stile:
/* Chrome, Safari, Opera */
@-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;}
}
/* Standard syntax */
@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;}
}
Versuch es selber " Verwandte Seiten
CSS3 Tutorial: CSS3 Animationen