このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
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 2015年9月.
animation-iteration-count は CSS のプロパティで、停止するまでにアニメーション周期が再生される回数を指定します。
試してみましょう
animation-iteration-count: 0;
animation-iteration-count: 2;
animation-iteration-count: 1.5;
<section class="flex-column" id="default-example">
<div>アニメーション<span id="playstatus"></span></div>
<div id="example-element">回数を選択すると始まります!</div>
</section>
#example-element {
align-items: center;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333;
color: white;
display: flex;
flex-direction: column;
height: 150px;
justify-content: center;
margin: auto;
margin-left: 0;
width: 150px;
}
#playstatus {
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%;
}
}
"use strict";
window.addEventListener("load", () => {
const el = document.getElementById("example-element");
const status = document.getElementById("playstatus");
function update() {
status.textContent = "待機中";
el.className = "";
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
el.className = "animating";
});
});
}
el.addEventListener("animationstart", () => {
status.textContent = "再生中";
});
el.addEventListener("animationend", () => {
status.textContent = "完了";
});
const observer = new MutationObserver(() => {
update();
});
observer.observe(el, {
attributes: true,
attributeFilter: ["style"],
});
update();
});
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利です。
構文
/* キーワード値 */
animation-iteration-count: infinite;
/* <number> 値 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;
/* 複数の値 */
animation-iteration-count: 2, 0, infinite;
/* グローバル値 */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;
animation-iteration-count プロパティは 1 つ以上のカンマで区切られた値で指定します。
値
infinite-
アニメーションは無制限に繰り返されます。
<number>-
アニメーションが繰り返される回数です。既定値は
1です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、0.5はアニメーション周期の半分を再生します。負の数は無効です。
メモ:
animation-* プロパティにカンマ区切りで複数の値を指定した場合、 animation-name に現れる順にアニメーションに適用されます。アニメーションの数と animation-* プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。
メモ:
CSS スクロール駆動アニメーションを作成するとき、 animation-iteration-count を指定すると、進行タイムラインの進行に伴ってその回数だけアニメーションが繰り返されます。もし animation-iteration-count が指定されなかった場合、アニメーションは一度しか発生しません。 infinite はスクロール駆動のアニメーションには有効な値ですが、アニメーションはうまく動作しません。
公式定義
形式文法
animation-iteration-count =
<single-animation-iteration-count>#
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
例
繰り返し回数を設定
10 回実行されるアニメーション
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);
}
}
結果
矩形にポインターを当てるとアニメーションが始まります。
CSS アニメーションを参照してください。
仕様書
| Specification |
|---|
| CSS Animations Level 1 # animation-iteration-count |
ブラウザーの互換性
Loading...
関連情報
- CSS アニメーションの使用
- JavaScript の
AnimationEventAPI - その他のアニメーション関連プロパティ:
animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-name,animation-play-state,animation-timeline,animation-timing-function