アニメーションの再生と一時停止を制御するための CSS のヒント (非常に実用的)

今日は、CSS を使用してアニメーションの再生と一時停止を制御する非常に簡単なトリックを紹介します。 適切に使用すれば、多くの実用的なシナリオに適用できます。

例を見てみましょう。Codepen を閲覧中にこの例を見つけました。非常に興味深いです。

この例、CodePen: https://codepen.io/mikegolus/pen/jJzRwJ

上記のプロセス全体は CSS によって完了します。上記の UI 効果のいくつかを実現するために CSS を使用する方法については後ほど説明します。この記事では主に、CSS のみを使用してアニメーションの進行、一時停止、開始を制御する方法について説明します。

解体と分析の要件

上記のアニメーション コントロールによって実現される効果は次のとおりです。

1. ページがレンダリングされた後、何も操作しないとアニメーションは開始されません。アニメーションは、マウスが要素をclickときにのみ開始され、要素の:active疑似クラス効果がトリガーされます。
2. アニメーションの途中でマウスのクリックを止めると、アニメーションは停止します。
3. 要素をもう一度クリックすると、前のフレームが終了した状態からアニメーションが続行されます。
4. アニメーションが終了した場合、もう一度クリックしてもアニメーションは再生されず、アニメーションの状態はアニメーションの最後のフレームのままになります。

ニーズの解決

複雑に思えるかもしれませんが、実際には、主に疑似クラス:activeとアニメーション再生状態animation-play-stateの助けを借りて、実装するのは非常に簡単です。

動いているボールを例に挙げてみましょう。ボールは左から右へ動きます。

<div></div>

div {
    マージン: 50px 自動;
    幅: 100ピクセル;
    高さ: 100px;
    背景: #000;
    アニメーション: 1 秒線形移動;
    アニメーション塗りつぶしモード: forwards;
}

@keyframes 移動 {
    100% {
        変換: translate(200px, 0) rotate(180deg);
    }
} 

次に、簡単な変換を行います。アニメーションのデフォルトの状態は一時停止です。

div {
    マージン: 50px 自動;
    幅: 100ピクセル;
    高さ: 100px;
    背景: #000;
    アニメーション: 1 秒線形移動;
    アニメーション塗りつぶしモード: forwards;
+ アニメーション再生状態: 一時停止;
}

アニメーションはクリックされたときにのみ実行されます。

body:アクティブdiv {
    アニメーション再生状態: 実行中;
}

効果を見てみましょう。クリック プロセスをわかりやすくするために、クリック プロセス中の背景色も変更しました (背景色の変化は、マウスが現在押されていることを示します)。

CodePen デモ: https://codepen.io/Chokcoco/pen/XGvwjL

総括する

実は、全体のプロセスは非常に簡単です。このメソッドを理解したら、任意のアニメーションに追加できます。同様のデモを次に示します。

CodePen デモ: https://codepen.io/Chokcoco/pen/ZPgxwy

とても便利なちょっとしたコツ、今すぐ手に入れましょう。

これで、CSS でアニメーションの再生と一時停止を制御するヒント (非常に実用的) に関するこの記事は終了です。CSS でアニメーションの再生と一時停止を制御することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。