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 Kurzform-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 ein oder mehrere durch Kommas getrennte Werte angegeben.
Werte
infinite-
Die Animation wird unendlich oft 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 spielt0.5die Hälfte des Animationszyklus ab. Negative Werte sind ungültig.
Hinweis: Wenn Sie mehrere durch Kommata getrennte Werte auf einer 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 die animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.
Hinweis: Bei der Erstellung von CSS scroll-gesteuerten Animationen führt die Angabe einer animation-iteration-count dazu, dass die Animation so oft wiederholt wird, wie im Verlauf des Zeitstrahls angegeben. Wenn keine 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
Festlegung der Wiederholungsanzahl
Diese Animation läuft 10 Mal.
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 weitere 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