【CSS】animation-play-stateプロパティの使用方法を徹底解説!!

こんにちは。

CSS3のアニメーションを使っていると、時々アニメーションをホバーしたら停止させたいなぁと思ったことはありませんか?

 完全に停止というよりは一時停止くらいはできないのかなぁ

そんなお悩みにお答えするに最適なプロパティがanimation-play-stateプロパティです!

そこで今回は、animation-play-stateプロパティの

・基本的な使い方

についてサンプルコードと一緒に徹底解説します!

animation-play-stateとは

animation-play-stateの読み方

animation-play-stateは「アニメーション プレイ ステート」と読みます。

stateとは日本語で「状態」を意味します。

プロパティの用途も読みの通りで、アニメーション(animation)の再生(play)の状態(state)を設定するプロパティになります。

animation-play-stateはアニメーションの再生を一時停止させる時に使用するプロパティ

animation-play-stateプロパティの用途を具体的にいうと、

アニメーションの再生を一時停止させる際に使用するプロパティ

です。

対象要素にホバーした際にアニメーションを一時停止したい時などに使用します。

animation-play-stateで利用できる値

animation-play-stateでは以下の値を使うことができます。

説明
 running  アニメーションを再生可能な状態にします。(初期値)
 paused  アニメーションをポーズ(一時停止)の状態にします。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応
注意
animation-play-stateプロパティは他の方法で同様の挙動を行うことが容易なため、仕様からの削除が検討されています。現在はどのブラウザでも使用可能なプロパティですが、近い将来使えなくなる可能性も考えられます。

animation-play-stateの基本的な使い方

animation-play-stateプロパティは単体では動作しません。

通常アニメーションの設計図でもあるキーフレームやanimation-name、animation-durationなどのアニメーション関連のプロパティと併用して使用します。

それではサンプルコードをみていきましょう。

実装例

今回は赤い円の背景色を徐々に変化させるアニメーションを使用します。

See the Pen
animation-play-state–running
by ryuga (@ryuga)
on CodePen.

animation-play-stateプロパティを「running」にすることによってアニメーションを再生状態にすることができます。

runningに関しては、animation-play-stateプロパティの初期値でもあるため、何も設定しなくてもアニメーションは再生されます。

これだけではanimation-play-stateの本領を発揮できません。animation-play-stateプロパティは再生と一時停止を切り替える時に晴れて力を発揮します。

それでは次にanimation-play-stateプロパティの使い所を見ていきましょう。

アニメーションを一時停止する

先ほども説明しましたが、animation-play-stateプロパティはアニメーションの再生と一時停止を切り替えたりする際に使用することが多いです。

その例がホバーした時に一時停止するパターンです。

See the Pen
animation-play-state–paused
by ryuga (@ryuga)
on CodePen.

円にマウスカーソルを乗せてみてください。円の背景色が、マウスを乗せた時から変化しませんよね。

「.circle:hover { animation-play-state: paused; }」としたことで、マウスをホバーするとアニメーションがその時点から一時停止されるようになっています。

そしてマウスを円から離すと再び背景色が変わるアニメーションが再生されると思います。

また一時停止中のアニメーションは一時停止した時点で停止して表示されます。再開される時にはアニメーションは始め(赤い背景色)からではなく、その状態から再生されます。

このようにして、animation-play-stateプロパティを使用することによってアニメーションの再生と一時停止を切り替えることができます。

まとめ

いかがでしょうか?

今回はanimation-play-stateプロパティの基本的な使い方をサンプルコードと一緒に解説していきました。

CSS3のアニメーションはJavaScriptで実装する同等のアニメーションよりも軽量であることから、今後も開発で利用される頻度が増えると言われています。

この機会にぜひアニメーション関連のプロパティの使い方を覚えちゃいましょう!!

参考文献:http://www.htmq.com/css3/animation-play-state.shtml