こんにちは。
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-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
