CSS3 Animationen
CSS3-Animationen ermöglicht Animation der meisten HTML-Elemente ohne JavaScript oder Flash verwenden!
Animation
Browser-Unterstützung für Animationen
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft 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- |
| 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- |
Was sind CSS3 Animationen?
Eine Animation lässt ein Element nach und nach von einem Stil zum anderen ändern.
Sie können so viele CSS-Eigenschaften ändern Sie wollen, so oft Sie wollen.
Um CSS3 Animationen verwenden, müssen Sie zunächst einige Keyframes für die Animation festlegen.
Keyframes halten, welche Arten das Element zu bestimmten Zeiten haben wird.
Die @keyframes Regel
Wenn Sie CSS - Stile innerhalb der angeben @keyframes Regel wird die Animation nach und nach aus dem aktuellen Stil den neuen Stil zu bestimmten Zeiten ändern.
Um eine Animation zur Arbeit zu erhalten, müssen Sie die Animation auf ein Element binden.
Das folgende Beispiel bindet das "Beispiel" Animation auf die <div> Element. Die Animation wird dauert 4 Sekunden, und es wird nach und nach die Hintergrundfarbe des ändern <div> Element von "rot" auf "gelb":
Beispiel
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Versuch es selber " Hinweis: Wenn die animation-duration Eigenschaft nicht angegeben ist, wird die Animation keine Auswirkungen haben, da der Standardwert 0 ist.
In dem obigen Beispiel wir angegeben haben , wenn der Stil , indem Sie die Keywords ändern wird "from" und "to" (die 0% darstellt (Start) und 100% (gesamt)).
Es ist auch möglich Prozent zu verwenden. Durch die Verwendung Prozent, können Sie so viele Stiländerungen, wie Sie wollen.
Im folgenden Beispiel wird die Hintergrundfarbe des ändern <div> Element , wenn die Animation 25% abgeschlossen ist, 50% abgeschlossen, und wieder , wenn die Animation zu 100% abgeschlossen ist:
Beispiel
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Versuch es selber " Das folgende Beispiel ändert sich sowohl die Hintergrundfarbe und die Position des <div> Element , wenn die Animation 25% abgeschlossen ist, 50% abgeschlossen, und wieder , wenn die Animation zu 100% abgeschlossen ist:
Beispiel
/* The animation code */
@keyframes example
{
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Versuch es selber " Verzögerung eines Animations
Die animation-delay - Eigenschaft gibt eine Verzögerung für den Start einer Animation.
Das folgende Beispiel hat eine 2-Sekunden-Verzögerung, bevor die Animation starten:
Beispiel
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Versuch es selber " Stellen Sie, wie oft eine Animation starten
Die animation-iteration-count - Eigenschaft gibt die Anzahl , wie oft sollte eine Animation laufen.
Im folgenden Beispiel wird die Animation 3 mal laufen, bevor es aufhört:
Beispiel
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Versuch es selber " Im folgenden Beispiel wird der Wert " infinite " , um die Animation immer weiter machen:
Beispiel
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Versuch es selber " Führen Sie Animation in Sperrrichtung oder Alternate-Zyklen
Die animation-direction Eigenschaft wird verwendet , um eine Animation laufen in umgekehrter Richtung oder abwechselnden Zyklen zu lassen.
Im folgenden Beispiel wird die Animation in umgekehrter Richtung laufen:
Beispiel
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Versuch es selber " Im folgenden Beispiel wird der Wert "alternate" , um die Animation zu machen zuerst vorwärts laufen, dann rückwärts, dann vorwärts:
Beispiel
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Versuch es selber " Geben Sie die Drehzahlkurve des Animations
Die animation-timing-function Eigenschaft gibt die Geschwindigkeitskurve der Animation.
Die Animation-Timing-Funktion Eigenschaft kann die folgenden Werte haben:
-
ease- gibt eine Animation mit einem langsamen Start, dann schnell, dann langsam zu beenden (diese Standardeinstellung) -
linear- gibt eine Animation mit der gleichen Geschwindigkeit von Anfang bis Ende -
ease-in- gibt eine Animation mit einem langsamen Start -
ease-out- gibt eine Animation mit einem langsamen Ende -
ease-in-out- gibt eine Animation mit einem langsamen Start und Ende -
cubic-bezier(n,n,n,n)- Hier können Sie Ihre eigenen Werte in einem kubisch-Bezier - Funktion definieren
Das folgende Beispiel zeigt die einige der verschiedenen Geschwindigkeitskurven, die verwendet werden können:
Beispiel
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} Versuch es selber " Animation, Kurzschrift-Eigenschaft
Das folgende Beispiel verwendet sechs der Animationseigenschaften:
Beispiel
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Versuch es selber " Das gleiche Animationseffekt wie oben kann unter Verwendung der Kurzschrift erreicht werden animation Eigenschaft:
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 » Übung 6»
CSS3 Animationseigenschaften
Die folgende Tabelle listet die @keyframes Regel und alle Animationseigenschaften:
| Eigentum | Beschreibung |
|---|---|
| @keyframes | Gibt die Animation Code |
| animation | Eine zusammenfassende Eigenschaft für alle Animationseigenschaften einstellen |
| animation-delay | Gibt eine Verzögerung für den Start einer Animation |
| animation-direction | Gibt an, ob eine Animation in umgekehrter Richtung oder abwechselnden Zyklen spielen |
| animation-duration | Gibt an, wie viele Sekunden oder Millisekunden eine Animation eines Zyklus in Anspruch nimmt |
| animation-fill-mode | Gibt einen Stil für das Element, wenn die Animation nicht abgespielt wird (wenn es fertig ist, oder wenn es eine Verzögerung hat) |
| animation-iteration-count | Gibt die Anzahl von Malen eine Animation wiedergegeben werden sollen |
| animation-name | Gibt den Namen der @keyframes Animation |
| animation-play-state | Gibt an, ob die Animation läuft oder pausiert |
| animation-timing-function | Gibt die Geschwindigkeitskurve der Animation |