animation-iteration-count
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die animation-iteration-count CSS Eigenschaft legt fest, wie oft eine Animationssequenz abgespielt werden soll, bevor sie stoppt.
Es ist oft praktisch, die Kurzschreibweise der Eigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.
Probieren Sie es aus
animation-iteration-count: 0;
animation-iteration-count: 2;
animation-iteration-count: 1.5;
<section class="flex-column" id="default-example">
<div>Animation <span id="play-status"></span></div>
<div id="example-element">Select a count to start!</div>
</section>
#example-element {
align-items: center;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333333;
color: white;
display: flex;
flex-direction: column;
height: 150px;
justify-content: center;
margin: auto;
margin-left: 0;
width: 150px;
}
#play-status {
font-weight: bold;
}
.animating {
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
const el = document.getElementById("example-element");
const status = document.getElementById("play-status");
function update() {
status.textContent = "delaying";
el.className = "";
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
el.className = "animating";
});
});
}
el.addEventListener("animationstart", () => {
status.textContent = "playing";
});
el.addEventListener("animationend", () => {
status.textContent = "finished";
});
const observer = new MutationObserver(() => {
update();
});
observer.observe(el, {
attributes: true,
attributeFilter: ["style"],
});
update();
Syntax
/* Keyword value */
animation-iteration-count: infinite;
/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;
/* Multiple values */
animation-iteration-count: 2, 0, infinite;
/* Global values */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;
Die animation-iteration-count Eigenschaft wird als ein oder mehrere durch Kommas getrennte Werte angegeben.
Werte
infinite-
Die Animation wird endlos wiederholt.
<number>-
Die Anzahl der Wiederholungen der Animation; standardmäßig ist dies
1. Nicht-ganzzahlige Werte können angegeben werden, um einen Teil eines Animationszyklus abzuspielen: Zum Beispiel spielt0.5die Hälfte des Animationszyklus ab. Negative Werte sind ungültig.
Hinweis:
Wenn Sie mehrere durch Kommas getrennte Werte für eine animation-* Eigenschaft angeben, werden diese den Animationen in der Reihenfolge zugewiesen, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und der animation-* Eigenschaftswerte nicht übereinstimmen, siehe Mehrere Animationswerte festlegen.
Hinweis:
Wenn Sie scrollgesteuerte CSS-Animationen erstellen, führt die Angabe einer animation-iteration-count dazu, dass die Animation so oft wiederholt wird, wie es im Verlauf der Zeitleiste angegeben ist. Wenn kein animation-iteration-count angegeben ist, wird die Animation nur einmal ausgeführt. infinite ist ein gültiger Wert für scrollgesteuerte Animationen, führt jedoch zu einer Animation, die nicht funktioniert.
Formale Definition
| Anfangswert | 1 |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
animation-iteration-count =
<single-animation-iteration-count>#
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
Beispiele
Wiederholungsanzahl festlegen
Diese Animation wird 10 Mal ausgeführt.
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
animation-iteration-count: 10;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Ergebnis
Bewegen Sie den Mauszeiger über das Rechteck, um die Animation zu starten.
Siehe CSS-Animationen für Beispiele.
Spezifikationen
| Specification |
|---|
| CSS Animations Level 1 # animation-iteration-count |
Browser-Kompatibilität
Siehe auch
- Verwendung von CSS-Animationen
- JavaScript
AnimationEventAPI - Andere verwandte Animationseigenschaften:
animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-name,animation-play-state,animation-timeline,animation-timing-function