CSS3 @keyframes Regeln
Beispiele
Machen Sie ein div Element bewegt sich nach und nach 200 Pixel:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
Versuchen »
Im unteren Bereich dieser Seite finden Sie weitere Beispiele.
Browser-Unterstützung
| 属性 | |||||
|---|---|---|---|---|---|
| @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- |
Tag Definitionen und Anleitungen
Verwenden Sie @keyframes Regeln können Sie Animation erstellen.
Animationen erstellen, indem allmählich die Einstellung von einem CSS-Stil zum anderen ändern.
Während der Animation können Sie die CSS-Style-Zeiten Einstellung ändern.
Verwenden Sie tritt auf, wenn eine festgelegte Veränderung in% oder Stichwort "von" und "zu", und dies die 0% bis 100% identisch ist.
0% ist der Beginn der Animation, 100%, wenn die Animation abgeschlossen ist.
Für eine optimale Browser-Unterstützung, sollten Sie immer als 0% und 100% der Wähler definiert werden.
Hinweis: Verwenden Sie dieAnimationseigenschaft das Erscheinungsbild der Animation zu steuern , ist auch zu wählen binden Animation verwendet. .
Grammatik
| Wert | Erklärung |
|---|---|
| animationname | Erforderlich. Definieren Sie die Animation Namen. |
| Keyframes-Selektor | Erforderlich. Der prozentuale Dauer der Animation. Rechtswert: 0-100% Hinweis: Sie können eine animierte Keyframes-Selektoren. |
| CSS-Stile | Erforderlich. Ein oder mehrere legitime CSS-Stilattribute |
Online Beispiele
Beispiele
Viele der Key-Frame-Selektor einen Film hinzuzufügen:
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
Versuchen »
Beispiele
Ändern Sie viele CSS-Stile in einer Animation:
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
Versuchen »
Beispiele
Viele Keyframe-Selektoren mit vielen CSS-Stile:
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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;}
}
Versuchen »
In Verbindung stehende Artikel
Tutorial CSS3: CSS3 Animationen