例3説明animation-play-state[animation-play-state]はアニメを一時停止したり、再生したりする仕様なので、普通に考えるとマウスホバー時に停止し、マウスアウトで停止前の続きから動かす、などで使うことを想定しているのではないかと思ったりします。思いついた点について実験してみました。例1はアニメ設定したdivにマウスホバーした時に、「animation-play-state」で「paused」を指定し、さらににテストでtop:0pxも合わせてホバー効果を実験してみたものです。[top:0px]を指定してみました。※アニメはanimation-timing-functionと同じですが、コマ漫画アニメではなく、pausedが分かりやすくなるように、linearで上にスクロールさせています。結果、[paused]が効いて、ホバー時はアニメが停止しているのが確認できました。マウスアウトすると、アニメが再開しました。animation-play-state:runningを指定していなくても、ちゃんと動きます。これは、animation-play-stateを指定していない場合は初期値がrunningになっているからかと思われます。[top:0px]も指定してみましたが、animationのスタイルと重複するので無視された状態になっています。同じ状態が確認できました。重複するスタイルを強制的に有効にする方法として、「!important」がありますので、試してみました。「!important」を付加しています。結果、FF41のみ、top:0pxとなりましたが、スクロールがしていた状態からtransitionでアニメしながらの変化ではなく、いきなりtop:0px位置になりました。例1と同じでアニメが停止しているだけでした。いうことで、この手法ではFF以外のブラウザがダメなので、使えない方法だと判明しました。「animation-play-state:paused」とtransition変化の組み合わせはダメだったので、アニメをアニメで上書きする方法でやってみました。ホバー時にanimation-play-state:pausedと別のanimation指定が同じ場所にあると正しい動作としてはアニメ停止が正解のような気もしましたが、順番をpausedの後に別のアニメ指定しているので、一応、別のアニメの方が動作している感じにはなりました。マウスアウトすると、最初のアニメは頭からやり直しになっています。(前に確認したのと同じでアニメが上書きされ、また上書きされて最初からになってる状態)マウスアウトすると最初のアニメは頭から再生なので、animation-play-state:pausedは効果なしになりました。ブラウザ毎の違いは以下になります。FF41,GC45,Opera32...マウスホバーで新しいアニメの動作になった。IE10...マウスホバーで新しいアニメの動作の100%スタイルのtop,leftのみにいきなり変化で停止。transformは効果なし。例3へ実験結果のまとめホバー時に指定した「animation-play-state:paused」は、4つのブラウザで共通の演出をする場合、「アニメを停止するだけ」にしか使い道が無い様子でした。ホバー時に「animation-play-state:paused」と!importantを付加したtransition効果を設定しても、FF以外は無視されました。ホバー時に「animation-play-state:paused」と他のアニメ指定をすると、マウスアウト時に最初のアニメは頭から開始なので、「animation-play-state:paused」(アニメをそのまま途中停止)の意味がなくなる、という結果になりました。動いているアニメをその状態で停止させるだけなので、例えば商品広告ブロックを切り替えて表示しているアニメで、次へ進まずによく見たい、と言う時にマウスホバーなどでその状態で停止させる、という使い方になるかと思ったりします。CLICK適用するキーフレーム(アニメ名)を指定。カンマ区切りで複数指定ができる。CLICK1回のアニメーション時間を指定。初期値の0sはアニメーションを実行しない設定。CLICKキーフレームの始まりから終わりまでの間のアニメの仕方を指定キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。)3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。D(xd,yd)=D(1.0,1.0)は省略で、BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。変化量は文字でも可能。CLICKアニメ開始の待ち時間を指定。初期値=0(すぐに開始)。負の値の場合、過去にさかのぼって開始されていたアニメのと中からはじまる。CLICKアニメーションを繰り返す回数。(無期限に繰り返す)。アニメ周期の一部を実行する場合、整数以外の値(例:0.5なら半分だけ実行)を指定も可能。CLICKアニメの繰り返し時に、逆方向か最初の状態から再び開始するか、の繰り返しの方法を指定。