animation-play-state

[animation-play-state]はアニメを一時停止したり、再生したりする仕様なので、普通に考えるとマウスホバー時に停止し、マウスアウトで停止前の続きから動かす、などで使うことを想定しているのではないかと思ったりします。
とりあえず、思いついた点について実験してみました。

【例1 マウスホバーでアニメ停止を指定してみる】

例1はアニメ設定したdivにマウスホバーした時に、「animation-play-state」で「paused」を指定し、さらににテストでtop:0pxも合わせてホバー効果を実験してみたものです。
アニメはtopが変化するもので、ホバー時には [animation-play-state:paused] と [top:0px]を指定してみました。
※アニメはanimation-timing-functionと同じですが、コマ漫画アニメではなく、pausedが分かりやすくなるように、linearで上にスクロールさせています。

結果、[paused]が効いて、ホバー時はアニメが停止しているのが確認できました。マウスアウトすると、アニメが再開しました。
animation-play-state:runningを指定していなくても、ちゃんと動きます。これは、animation-play-stateを指定していない場合は初期値がrunningになっているからかと思われます。

ホバー時に [top:0px]も指定してみましたが、animationのスタイルと重複するので無視された状態になっています。
※FF41 GC45 IE10 で同じ状態が確認できました。

例1のアニメ設定、キーフレーム設定を表示

例1へ

【例2 マウスホバーでアニメ停止しつつ、!importantで上書きできるか実験】

重複するスタイルを強制的に有効にする方法として、「!important」がありますので、試してみました。
例2の方は例1と同じスタイル指定で、マウスホバー時にtransitionで指定した秒数(1s)で top:0px に「!important」を付加しています。

結果、FF41のみ、top:0pxとなりましたが、スクロールがしていた状態からtransitionでアニメしながらの変化ではなく、いきなりtop:0px位置になりました。
GC45 IE10 Opera32 では例1と同じでアニメが停止しているだけでした。
ということで、この手法ではFF以外のブラウザがダメなので、使えない方法だと判明しました。

例2のアニメ設定、キーフレーム設定を表示

例2へ

【例3 マウスホバーでアニメ停止しつつ、別のanimationを指定する実験】

「animation-play-state:paused」とtransition変化の組み合わせはダメだったので、アニメをアニメで上書きする方法でやってみました。
ホバー時にanimation-play-state:pausedと別のanimation指定が同じ場所にあると正しい動作としてはアニメ停止が正解のような気もしましたが、順番をpausedの後に別のアニメ指定しているので、一応、別のアニメの方が動作している感じにはなりました。
マウスアウトすると、最初のアニメは頭からやり直しになっています。（前に確認したのと同じでアニメが上書きされ、また上書きされて最初からになってる状態）

マウスアウトすると最初のアニメは頭から再生なので、animation-play-state:pausedは効果なしになりました。
ブラウザ毎の違いは以下になります。
FF41,GC45,Opera32…マウスホバーで新しいアニメの動作になった。
IE10…マウスホバーで新しいアニメの動作の100%スタイルのtop,leftのみにいきなり変化で停止。transformは効果なし。

例3のアニメ設定、キーフレーム設定を表示

例3へ

実験結果のまとめ

ホバー時に指定した「animation-play-state:paused」は、4つのブラウザで共通の演出をする場合、「アニメを停止するだけ」にしか使い道が無い様子でした。

ホバー時に「animation-play-state:paused」と!importantを付加したtransition効果を設定しても、FF以外は無視されました。

ホバー時に「animation-play-state:paused」と他のアニメ指定をすると、マウスアウト時に最初のアニメは頭から開始なので、「animation-play-state:paused」（アニメをそのまま途中停止）の意味がなくなる、という結果になりました。

ということで、 animation-play-state:paused は動いているアニメをその状態で停止させるだけなので、例えば商品広告ブロックを切り替えて表示しているアニメで、次へ進まずによく見たい、と言う時にマウスホバーなどでその状態で停止させる、という使い方になるかと思ったりします。

animationのプロパティ

animation-name CLICK

適用するキーフレーム(アニメ名)を指定。カンマ区切りで複数指定ができる。

animation-duration CLICK

1回のアニメーション時間を指定。1s 等と指定。初期値の0sはアニメーションを実行しない設定。

animation-timing-function CLICK

キーフレームの始まりから終わりまでの間のアニメの仕方を指定

キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。(引用：[MDN] animation-timing-function )

3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。
A,B,C,D は それぞれA(xa,ya)=A(0,0), D(xd,yd)=D(1.0,1.0)は省略で、
BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。
変化量は文字でも可能。
ease = cubic-bezier(0.25, 0.1, 0.25, 1.0) (初期値)
linear = cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in = cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out = cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)

animation-delay CLICK

アニメ開始の待ち時間を指定。1s 等。
初期値=0(すぐに開始)。負の値の場合、過去にさかのぼって開始されていたアニメのと中からはじまる。

animation-iteration-count CLICK

アニメーションを繰り返す回数。1 や 2 などと数値、又は infinite (無期限に繰り返す)。
アニメ周期の一部を実行する場合、整数以外の値(例：0.5なら半分だけ実行)を指定も可能。

animation-direction CLICK

アニメの繰り返し時に、逆方向か最初の状態から再び開始するか、の繰り返しの方法を指定。

normal…順方向のアニメーションのみ(デフォルト)

alternate…初回 順方向、次に逆方向、以降、順、逆…と実行。(順 逆 順 逆 …)

reverse…逆方向のアニメーションのみ

normal…順方向のアニメーションのみ(デフォルト)

alternate-reverse…初回 逆方向、次に順方向、以降、逆、順…と実行。(逆 順 逆 順 …)

animation-fill-mode CLICK

アニメの実行前や実行後に適用するスタイルを指定。

normal…アニメで指定されたスタイルは、アニメの実行前や実行後には適用されない。

forwards…アニメの最後に適用された状態を維持する。通常は100%やtoのスタイルになる。※animation-directionが alternate、animation-iteration-count が偶数の場合は0%やfromのスタイルとなる。

backwards…0%やfrom キーフレームで定義された値を即座に適用し、animation-delay プロパティで指定した時間の間、その状態を維持する。

both…forwards と backwards の両方の規定に従う。なのでアニメの設定が実行前と実行後の両方に適用される。

animation-play-state CLICK

アニメを一時停止、再開などを指定する設定。この仕様については、マウスホバーでrunningとpausedを切り替えるなどを想定してるのではないかと思う。

ページトップへ