CSSのanimation-play-stateでアニメーションの再生・一時停止を制御する方法をわかりやすく解説

2024.09.14
スポンサーリンク

animation-play-stateプロパティは、アニメーションの再生を一時停止または再開するために使用されます。通常は再生される設定ですが、一時停止することも可能です。これを使うことで、ユーザーの操作に応じてアニメーションの動作を制御することができます。

スポンサーリンク

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

  • running: アニメーションを通常通り再生します（デフォルト値）。
  • paused: アニメーションが一時停止されます。再開するまで動きません。

注意点と関連情報

animation-play-stateは、アニメーションの状態を制御するために非常に便利です。特に、ユーザーインタラクション（例えば、マウスオーバーやクリックなど）によってアニメーションを一時停止または再開させたい場合に役立ちます。また、JavaScriptと組み合わせて動的にアニメーションを制御することも可能です。

animation-play-stateプロパティが効かない時の原因と対策

他のアニメーション関連プロパティが正しく設定されていない

animation-play-stateが正しく機能するためには、animation-nameやanimation-durationといった他のアニメーションプロパティが適切に設定されている必要があります。
対策: 他のアニメーションプロパティが正しく設定されているか確認しましょう。例えば、animation-durationが0sではなく、適切な時間に設定されているかをチェックします。

アニメーションが一時停止されていることに気づかない

animation-play-state: paused;を設定している場合、アニメーションは一時停止していますが、目に見える変化がないと、停止していることに気づかないことがあります。
対策: 一時停止中の状態を確認するために、例えば要素のスタイルやコンソールログを活用して状態を視覚化しましょう。

共通する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-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-name: css-sample-move;
    }
    @keyframes css-sample-move {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(200px);
        }
    }

animation-play-state: running

animation-play-state: runningは、アニメーションが通常通り再生される状態を示します。アニメーションは一時停止されず、設定された動きがスムーズに実行されます。

HTMLコード

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

CSSコード

.css-sample-animation-running {
    animation-play-state: running;
}

表示結果

animation-play-state: paused

animation-play-state: pausedは、アニメーションを一時停止します。アニメーションは一時停止した位置で停止し、再びrunningに切り替わるまで動きません。

HTMLコード

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

CSSコード

.css-sample-animation-paused {
    animation-play-state: paused;
}

表示結果

まとめ

animation-play-stateプロパティを使用することで、アニメーションの動作を一時停止または再開させることができます。ユーザーの操作やJavaScriptを使った制御により、アニメーションの挙動を柔軟に変更できます。pausedを使って動きを停止し、再開したいタイミングでrunningに切り替えることで、インタラクティブなエクスペリエンスを実現できます。

スポンサーリンク