Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: animation-iteration-count, Kategorien: Animierte Inhalte (allgemein), Animations (CSS 3)

Wiederholungen einer Animation

Steuert die Anzahl der Wiederholungen eine Animation.

CSS-Eigenschaft: animation-iteration-count
KurzbeschreibungWerteStandardwertKategorieHinweis
Wiederholungen einer Animation
  • <number>
  • infinite
1
Allgemein:
Animierte Inhalte
CSS 3:
Animations
Neu in CSS 3
 

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.

Browserunterstützung von animation-iteration-count
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20
-webkit-
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6
-webkit-
Version: 10Version: 11Version: 12
nj

Weiterführende Informationen zu animation-iteration-count:



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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 5 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 6 So sieht's aus:

Blaue Kugel
 

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;    
}
Beispiel nur für: SafariGoogle Chrome

Testbeispiel: Schreibweise mit
Vendor-Präfix

Rote Kugel
 

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;    
}
Beispiel nur für: FirefoxInternet Explorer
W3C: 10
Opera

Testbeispiel: Standardschreibweise

Rote Kugel
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.114 sec.

Browser-Marktanteile