CSSのanimation-iteration-countでアニメーションの繰り返し回数を指定し、動きを制御する方法をわかりやすく解説

2024.09.14
スポンサーリンク

animation-iteration-countプロパティは、アニメーションを何回繰り返すかを指定します。1回のみ再生するか、複数回、もしくは無限にアニメーションを繰り返すことができます。

スポンサーリンク

animation-iteration-countプロパティの値とその効果

  • 1: アニメーションを1回だけ再生します（デフォルト値）。繰り返しません。
  • n: 指定された回数だけアニメーションを繰り返します。
  • infinite: アニメーションが無限に繰り返されます。

注意点と関連情報

animation-iteration-countは、アニメーションがどのくらい繰り返されるかを指定するために使います。infiniteを使うとアニメーションが無限に繰り返され、ページに動きのあるコンテンツを追加できますが、使用方法によってはパフォーマンスに影響を与える可能性があります。また、繰り返し回数が少ない場合は、アニメーションがすぐに終了するため、特定のタイミングで動きを見せたい時に便利です。

animation-iteration-countが効かない理由として考えられること

アニメーションが正しく設定されていない

animation-iteration-countはアニメーションの繰り返し回数を指定するプロパティですが、アニメーション自体が正しく設定されていない場合、このプロパティは機能しません。
対策：@keyframesやanimation-nameが正しく設定されているか確認し、アニメーションが正常に適用されていることを確認します。

animation-durationが0に設定されている

animation-durationが0に設定されている場合、アニメーションが実行されず、animation-iteration-countも機能しません。
対策：animation-durationが適切に設定されているか確認し、持続時間を正しい値に設定します。

アニメーションの終了状態が原因

アニメーションが1回で終了するように設定されている場合、animation-iteration-countが設定されていても、終了後に効果が見られないことがあります。
対策：animation-fill-modeやanimation-directionを適切に設定し、アニメーションが繰り返し実行されることを確認しま

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        text-align: center;
    }
    .css-sample-box {
        margin: 20px 0;
        width: 150px;
        height: 150px;
        background-color: #4CAF50;
        display: inline-block;
        animation: css-sample-move 2s linear;
    }
    @keyframes css-sample-move {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(200px);
        }
    }

animation-iteration-count: 1

animation-iteration-count: 1は、アニメーションが1回だけ再生されます。この場合、アニメーションは1サイクルのみで終了します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-iteration-1"></div>
    </div>

CSSコード

.css-sample-animation-iteration-1 {
    animation-iteration-count: 1;
}

表示結果

animation-iteration-count: 3

animation-iteration-count: 3は、アニメーションが3回繰り返されます。アニメーションが3サイクル再生された後に停止します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-iteration-3"></div>
    </div>

CSSコード

.css-sample-animation-iteration-3 {
    animation-iteration-count: 3;
}

表示結果

animation-iteration-count: infinite

animation-iteration-count: infiniteは、アニメーションが無限に繰り返されます。ページを閉じるまで、アニメーションが継続します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-iteration-infinite"></div>
    </div>

CSSコード

.css-sample-animation-iteration-infinite {
    animation-iteration-count: infinite;
}

表示結果

まとめ

animation-iteration-countプロパティを使用することで、アニメーションがどのくらい繰り返されるかを制御できます。少ない回数の指定で一時的な動きを作成したり、無限に繰り返すことで、ページに継続的な動きのある要素を配置することができます。使用する状況に応じて、適切な回数やinfiniteを選択し、動きのあるデザインを実現しましょう。

スポンサーリンク