CSS-Eigenschaft: animation-iteration-count, Kategorien: Animierte Inhalte (allgemein), Animations (CSS 3)
Wiederholungen einer Animation
Steuert die Anzahl der Wiederholungen eine Animation.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Wiederholungen einer Animation |
| 1 |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Animierte Inhalte (allgemein), Animations (CSS 3):
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- Aktuelle Seite: animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Folgendes ist beim Einsatz von animation-iteration-count zu beachten:
Über animation-iteration-count werden die Wiederholungen einer Animation gesteuert.
Gültige Werte sind positive Zahlen (Ganzzahlen als auch Fließkommazahlen) sowie das Schlüsselwort infinite.
Der Wert 0 führt dazu, dass eine Animation nicht abgespielt wird.
Über das Schlüsselwort infinite wird definiert, dass eine Animation in einer Endlosschleife abgespielt wird.
Fließkomma-Zahlen bewirken, dass eine Animation anteilig angespielt wird. Ein Wert von 0.75 beispielsweise bewirkt,
dass die über die
@keyframes- bzw. @-webkit-keyframes-Regel definierte Animation zu 75% durchlaufen wird.
Danach springt die Animation zu ihrem Anfangszustand zurück. Fließkommazahlen werden von Firefox, Opera und Google-Chrome erkannt,
Safari 5 ignoriert Fließkommazahlen und verwendet bei einer solchen Deklaration den Standardwert 1.
Animationen und animation-iteration-count werden aktuell (Februar 2013) von Firefox und Opera (ab der Version 12.10) in der
Standardschreibweise, von Google Chrome und Safari in der Schreibweise mit dem Vendor-Präfix -webkit- unterstützt.
Weitere Informationen über Animationen sind (in Kürze) unter animation zu finden.
Hinweis:
Beim Aufbau der Beispiele wurde deutlich, dass sich Animationen direkt auf die Leistung des Rechners
auswirken. Besonders Google Chrome treibt die CPU-Auslastung stark in die Höhe.
Bei Opera hingegen ist zu beobachten, dass es, besonders bei mehreren Animationen auf einer Seite, zum Abbruch der Animationen kommt.
Hier scheint die Browser-Implementierung von Animationen noch optimierbar zu sein.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||
Weiterführende Informationen zu animation-iteration-count:
- W3C Spezifikation:
http://www.w3.org/TR/css3-animations/#animation-iteration-count
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
animation-fill-mode - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
animation-name
Beispiele
HTML:
<div id="example-1" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
/* Der schwarze Rahmen für die Box und die Animation an sich werden mit den folgenden Zeilen definiert.
Diese wirken auf alle folgende Beispiele. */
div {
border: 4px solid black;
width: 300px;
}
/* Über die Keyframe-Regel wird die eigentliche Animation definiert. */
@-webkit-keyframes move-ball {
from {
left: 0px;
}
50% {
left: 200px;
}
to {
left: 0px;
}
}
@keyframes move-ball {
from {
left: 0px;
}
50% {
left: 200px;
}
to {
left: 0px;
}
}
/* Über den "identifier" (hier "move-ball") und die CSS-Eigenschaft animation-name (bzw. -webkit-animation-name für die Webkit-Browser) wird die Animation zugewiesen.
Diese Animation ist Grundlage für alle Beispiele. */
div.examples img {
position: relative;
-webkit-animation-name: move-ball;
animation-name: move-ball;
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
#example-1 img {
}
/* Keine Angabe von animation-iteration-count - die Animation wird laut Standard 1 Mal wiederholt (startet beim Neu laden der Seite). */
Beispiel Nr. 1 So sieht's aus:
HTML:
<div id="example-2" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-2 img {
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
}
/* Animation wird 3 Mal wiederholt. */Beispiel Nr. 2 So sieht's aus:
HTML:
<div id="example-3" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-3 img {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* Das Schlüsselwort "infinite" bewirkt eine Animation in Endlos-Schleife. */Beispiel Nr. 3 So sieht's aus:
HTML:
<div id="example-4" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-4 img {
-webkit-animation-iteration-count: 0;
animation-iteration-count: 0;
}
/* 0 bewirkt, dass die Animation erst gar nicht abgespielt wird. */Beispiel Nr. 4 So sieht's aus:
HTML:
<div id="example-5" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-5 img {
-webkit-animation-iteration-count: -5;
animation-iteration-count: -5;
}
/* Negative Werte sind nicht zulässig - hier greift der Standardwert 1. */Beispiel Nr. 5 So sieht's aus:
HTML:
<div id="example-6" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-6 img {
-webkit-animation-iteration-count: 2.4;
animation-iteration-count: 2.4;
}
/* Werte mit Nachkommastellen sind ebenfalls möglich. Die Animation wird dann anteilig abgespielt und springt dann (Firefox, Opera und Google Chrome) wieder zum Anfangszustand. Safari 5 erkennt den Wert nicht und stellt 1 Wiederholung dar. */Beispiel Nr. 6 So sieht's aus:
HTML:
<div id="testcase-vendor">
<img src="img/ball.png" alt="Rote Kugel">
</div>CSS:
@-webkit-keyframes allmargin {
from {
margin: 0px;
}
50% {
margin: 100px;
}
to {
margin: 0px;
}
}
#testcase-vendor img {
-webkit-animation-name: allmargin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 3;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
HTML:
<div id="testcase-standard">
<img src="img/ball.png" alt="Rote Kugel">
</div>CSS:
@keyframes allmargin {
from {
margin: 0px;
}
50% {
margin: 100px;
}
to {
margin: 0px;
}
}
#testcase-standard img {
animation-name: allmargin;
animation-duration: 3s;
animation-iteration-count: 3;
}Testbeispiel: Standardschreibweise
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!