CSS3-Animationen

CSS3, können wir Animationen erstellen, die viele Seiten animierte Bilder, Flash-Animationen ersetzen können, und Javascripts.

CSS3
Animation

CSS3 @keyframes Regeln

Um CSS3-Animationen zu erstellen, müssen Sie @keyframes Regeln lernen.

@keyframes Regel Animation zu erstellen. Geben Sie einen CSS-Stil und Animation wird nach und nach auf den neuen Stil aus dem aktuellen Stil innerhalb @keyframes Regeln ändern.

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.

Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.

属性
@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-
animation	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-

Beispiele

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3-Animationen

Wenn Animation @keyframes erstellen, binden Sie es an einem Wähler, sonst wird die Animation keine Wirkung.

Geben Sie mindestens zwei CSS3 Animationseigenschaft ist an einen Wähler gebunden:

Es gibt den Namen der Animation
Wenn eine vorbestimmte Länge Animation

Beispiele

Die "MyFirst" Animation div Element Dauer gebunden: 5 Sekunden:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Versuchen »

Hinweis: Sie müssen die Dauer der Animation und Animation Namen definieren.Wenn Sie die Dauer der Animation nicht angegeben wird, nicht ausgeführt werden, da der Standardwert 0 ist.

Was CSS3-Animationen sind?

Animationselement ist eine allmähliche Änderung von einem Stil zum anderen Stil-Effekt zu machen.

Sie können so viele Stile wie oft ändern.

Bitte benutzen Sie die prozentuale Änderung in der vorgeschriebenen Zeit, oder Stichwort "von" und "bis", das entspricht 0% und 100%.

0% ist der Beginn der Animation die Animation ist 100% vollständig.

Für beste Browser-Unterstützung, sollten Sie immer die 0% und 100% der Wähler definieren.

Beispiele

Ändern Sie die Hintergrundfarbe, wenn die Animation 25% und 50% und 100% abgeschlossen, wenn die Animation erneut geändert:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Versuchen »

Beispiele

Ändern Sie die Hintergrundfarbe und Ort:

@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Versuchen »

CSS3 Animationseigenschaften

In der folgenden Tabelle sind die @keyframes Regeln und alle Animationseigenschaften:

Immobilien	Beschreibung	CSS
@keyframes	Rückstellungen Animation.	3
Animation	Stenografie-Eigenschaft für alle Animationseigenschaften, zusätzlich zu den Animation-Play-State-Eigenschaft.	3
Animation-name	Gibt den Namen @keyframes Animation.	3
Animation-Dauer	Rückstellungen Animation nimmt einen Zyklus von Sekunden oder Millisekunden abzuschließen. Der Standardwert ist 0.	3
Animation-Timing-Funktion	Eine vorbestimmte Geschwindigkeit der Animation Kurve. Die Standardeinstellung ist "erleichtern".	3
Animation-Verzögerung	Wenn eine vorbestimmte Animation beginnt. Der Standardwert ist 0.	3
Animation-Iteration-count	Vorbestimmte Anzahl von Malen die Animation wiedergegeben wird. Der Standardwert ist 1.	3
Animation-Richtung	Ob die Bestimmungen der Animation umgekehrt zu den nächsten Zyklus zu spielen. Der Standardwert ist "normal".	3
Animation-Play-Zustand	Ob die Bestimmungen der Animation läuft oder pausiert. Die Standardeinstellung ist "läuft".	3

Die beiden folgenden Beispiele stellen Sie alle Animationseigenschaften:

Beispiele

Führen Sie MyFirst Animation, setzen Sie alle Attribute:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Versuchen »