基本こちらはCSSアニメーションの一時停止と再生(animation-play-state)で指定可能な値と、実装する方法のまとめ、動作サンプル集になります。jQueryのクリックイベントを利用して再生・一時停止を切り替える方法animation-play-stateの設定方法CSSアニメーションの再生状態を指定、変更可能にするにはanimation-play-stateの設定プロパティで個別に、またはanimationプロパティにて一括で設定する事が可能です。running;animation-play-stateに指定可能な値一覧animation-play-stateにて設定可能な再生状態を示す値はrunningとpausedの2種類となっており、デフォルト値はrunningです。一時停止animation-play-stateでCSSアニメーションの再生・一時停止させる方法animation-play-stateプロパティを利用する際、JavaScriptなどのスクリプトにて処理を実装する場合も多いですが、CSSのみでも簡単な挙動であれば実装するのは簡単です。伸縮バーアニメーションでanimation-play-stateの値を変更した場合を比較した動作サンプルになります。CodePen.この動作サンプルでは、Aはマウスホバー時(:hover)にanimationプロパティを指定したもの、Bは非マウスホバー時にanimationプロパティを指定してanimation-play-stateにてpaused、マウスホバー時にrunningを指定しています。挙動の違いとしてAはマウスカーソルが要素上から離れた際に元の状態に戻りますが、Bはその状態で一時停止となり、再度マウスカーソルが要素上に入ったら再生を開始します。実装したいアイテムにもよりますが、これだけでスムーズなアニメーションを用意する事が可能になるかもしれません。}}チェックボックスを利用して再生・一時停止を切り替える方法チェックボックスを利用したCSSプロパティ値の変更は良く使われますが、CSSアニメーションにおいても活用可能となっています。CodePen.動作サンプルでは、要素をクリックする事で回転開始、再度クリックする事で一時停止するようになっています。ポイントは、通常状態(チェックされていない時)ではpausedを指定しておき、チェックが入った時にanimation-play-stateの値をrunningに切り替えています。切り替える方法になります。CodePen.再生用のCSSclassを用意してJavaScriptでそのclassを付与、削除という方法もあると思いますが、今回は直接animation-play-stateの値を切り替えています。false);※サンプルではCSSアニメーションが再生中か一時停止中か判別するのに変数を使っていますが、複雑なコンテンツであればCSSからanimation-play-stateの値を取得して判別した方が良いかもしれません。切り替える方法になります。CodePen.基本的にはJavaScriptと同じようにクリックイベントから処理を実装しています。JQueryでのanimation-play-stateプロパティ値の変更はcss()で切り替える事が可能です。});※サンプルではCSSアニメーションが再生中か一時停止中か判別するのに変数を使っていますが、複雑なコンテンツであればCSSからanimation-play-stateの値を取得して判別した方が良いかもしれません。文字や画像の要素が小さく小刻みに震えるCSSアニメーションのサンプルコードです。...CSSでテキストを彩る装飾サンプル集CSSを使ってテキスト文字に影、立体、光沢などを付けて装飾するサンプル集です。文字やボールなどの要素を弾ませるバウンドアニメーションのCSSサンプル集です。要素や文字の色が変化するCSSアニメーションパターンです。コメントをキャンセルメールアドレスが公開されることはありません。