Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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.
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();
Es ist oft praktisch, die Kurzschreibweise der Eigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.
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 eine oder mehrere durch Kommas getrennte Werte angegeben.
Werte
infinite-
Die Animation wird unendlich wiederholt.
<number>-
Die Anzahl der Wiederholungen der Animation; standardmäßig ist dies
1. Sie können nicht-ganzzahlige Werte angeben, um einen Teil eines Animationszyklus abzuspielen: Zum Beispiel wird0.5die Hälfte des Animationszyklus abspielen. Negative Werte sind ungültig.
Hinweis:
Wenn Sie mehrere durch Kommas getrennte Werte für eine animation-* Eigenschaft angeben, werden sie in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und der animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animationswerte.
Hinweis:
Beim Erstellen von Scroll-gesteuerten CSS-Animationen bewirkt das Festlegen eines animation-iteration-count, dass die Animation diese Anzahl von Malen im Verlauf der Zeitachsenfortschreitung wiederholt wird. Wenn kein animation-iteration-count angegeben wird, erfolgt die Animation nur einmal. infinite ist ein gültiger Wert für scroll-gesteuerte Animationen, führt jedoch zu einer nicht funktionierenden Animation.
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
Iterationsanzahl 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
Fahren Sie mit der Maus ü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
Loading...
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