CSSのanimation-durationでアニメーションの再生時間を設定し、動きの速さを調整する方法をわかりやすく解説

2024.09.13
スポンサーリンク

animation-durationプロパティは、アニメーションが1サイクル（1回の再生）にかかる時間を指定します。アニメーションの長さを調整することで、ユーザーに与える印象やスムーズさをコントロールできます。

スポンサーリンク

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

  • time: アニメーションの継続時間を秒（s）またはミリ秒（ms）で指定します。
  • 0: アニメーションが即座に終了し、動きがないように見えます。

注意点と関連情報

animation-durationプロパティは、アニメーションの再生時間に直接影響を与えるため、短すぎるとアニメーションが速くなりすぎ、長すぎるとゆっくりすぎる動きになります。目的に応じた適切な時間を設定することが重要です。また、animation-timing-functionと組み合わせて使うと、再生中の動きをさらにカスタマイズできます。

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

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

animation-durationはアニメーションの持続時間を設定するプロパティですが、アニメーション自体が正しく設定されていないと、このプロパティは機能しません。
対策：@keyframesが正しく定義されていること、およびanimation-nameやanimationプロパティが要素に適用されていることを確認します。

animation-iteration-countが0になっている

animation-iteration-countが0に設定されていると、アニメーションは繰り返されず、animation-durationが適用されません。
対策：animation-iteration-countを1以上に設定して、アニメーションが再生されることを確認します。

共通する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 linear infinite;
    }
    @keyframes css-sample-move {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(200px);
        }
    }

animation-duration: 1s

animation-duration: 1sは、アニメーションが1秒で1サイクルを完了します。アニメーションの速度が速くなります。

HTMLコード

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

CSSコード

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

表示結果

animation-duration: 3s

animation-duration: 3sは、アニメーションが3秒で1サイクルを完了します。アニメーションの動きが標準的な速さになります。

HTMLコード

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

CSSコード

.css-sample-animation-duration-3s {
    animation-duration: 3s;
}

表示結果

animation-duration: 5s

animation-duration: 5sは、アニメーションが5秒で1サイクルを完了します。動きが非常にゆっくりとなります。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-duration-5s"></div>
    </div>

CSSコード

.css-sample-animation-duration-5s {
    animation-duration: 5s;
}

表示結果

まとめ

animation-durationプロパティを使うことで、アニメーションの継続時間を簡単に調整できます。適切な時間を設定することで、アニメーションがスムーズで視覚的に心地よい動きになります。目的に応じて、時間の長さを調整することが、ユーザー体験の向上に繋がります。

スポンサーリンク