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.
Dieanimation-iteration-countCSS Eigenschaft legt fest, wie oft eine Animationssequenz abgespielt werden soll, bevor sie stoppt.
Es ist oft praktisch, die Kurzschreibweise der Eigenschaftanimation 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> <div>Animation <span></span></div> <div>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;Dieanimation-iteration-count Eigenschaft wird als ein oder mehrere durch Kommas getrennte Werte angegeben.
Werte
infiniteDie 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 eineanimation-* Eigenschaft angeben, werden diese den Animationen in der Reihenfolge zugewiesen, in der dieanimation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und deranimation-* Eigenschaftswerte nicht übereinstimmen, sieheMehrere Animationswerte festlegen.
Hinweis:Wenn Siescrollgesteuerte CSS-Animationen erstellen, führt die Angabe eineranimation-iteration-count dazu, dass die Animation so oft wiederholt wird, wie es im Verlauf der Zeitleiste angegeben ist. Wenn keinanimation-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::afterPseudoelemente |
| 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></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.
SieheCSS-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