CSSのanimation-delayでアニメーションの開始タイミングを遅らせ、動きを調整する方法をわかりやすく解説

2024.09.13
スポンサーリンク

animation-delayプロパティは、アニメーションの開始を遅らせるために使用されます。このプロパティを設定すると、指定した遅延時間が経過してからアニメーションが開始されます。また、負の値を指定することで、アニメーションが途中から再生されるように設定することも可能です。

スポンサーリンク

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

  • time: アニメーションの遅延時間を秒（s）またはミリ秒（ms）で指定します。
  • 0: アニメーションの遅延を設定しない（すぐに開始されます）。
  • 負の値: アニメーションが途中から再生されます。負の値の分だけアニメーションの開始が省略されます。

注意点と関連情報

animation-delayプロパティを使用する際には、遅延時間の管理が重要です。特に複数のアニメーションを同時に実行する場合、各アニメーションのタイミングを適切に設定することで、アニメーション全体がスムーズに見えるようになります。また、負の値を指定することで、アニメーションが途中から開始されるため、アニメーションの進行具合を調整する際に便利です。

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

アニメーションが適切に設定されていない

animation-delayはアニメーションの開始タイミングを遅らせるプロパティですが、そもそもアニメーション自体が適切に設定されていない場合、animation-delayも機能しません。
対策：アニメーション名、@keyframesルールが正しく設定されていることを確認します。また、animationまたはanimation-nameプロパティが要素に適用されているか確認します。

アニメーションの時間が短すぎる

animation-delayが機能している場合でも、アニメーションの持続時間が極端に短いと、遅延が発生しているように見えないことがあります。
対策：animation-durationプロパティでアニメーションの持続時間を確認し、適切な長さに調整します。

アニメーションが繰り返し設定されている

アニメーションがループで設定されている場合、animation-delayが繰り返しのたびにリセットされることがあります。
対策：animation-iteration-countやanimation-fill-modeの設定を確認し、意図したアニメーション動作になるように調整します。

共通する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-rotate 3s linear infinite;
    }
    @keyframes css-sample-rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

animation-delay: 1s

animation-delay: 1sは、アニメーションの開始を1秒遅らせます。1秒後にアニメーションが再生されます。

HTMLコード

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

CSSコード

.css-sample-animation-delay-1s {
    animation-delay: 1s;
}

表示結果

animation-delay: 2s

animation-delay: 2sは、アニメーションの開始を2秒遅らせます。アニメーションは2秒後に再生されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-delay-2s"></div>
    </div>

CSSコード

.css-sample-animation-delay-2s {
    animation-delay: 2s;
}

表示結果

animation-delay: -1s

animation-delay: -1sは、アニメーションを1秒早送りで開始します。負の値を指定することで、アニメーションの開始位置が1秒分省略され、アニメーションが途中から再生されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-delay-minus-1s"></div>
    </div>

CSSコード

.css-sample-animation-delay-minus-1s {
    animation-delay: -1s;
}

表示結果

まとめ

animation-delayプロパティは、アニメーションの開始タイミングを遅らせたり、負の値を使って途中から開始させるなど、アニメーションのタイミングを細かく制御することができます。アニメーションの複数パターンを作成する際に、時間の管理をうまく行うことで、ユーザー体験が向上します。

スポンサーリンク