0.5倍速以下で表示
Chromeの開発ツールはCSSアニメーションの再生速度を0.5倍速、0.25倍速、0.1倍速に変更して見ることができる。
やり方は簡単でChromeメニューから「その他ツール→デベロッパーツール」を選択し、ElementsタブのStylesタブの右上にあるCSSアニメーションのボタンを押して倍率をバーをスライドして変更するだけだ。
CSSアニメーションの一時停止
Animationsの一番左にあるボタンを押せばCSSアニメーションを一時停止できる。(absoluteなどを使用したアニメーションは停止できない。)
CSSアニメーションのサンプル
iwb.jp
上記の回転している赤い正方形のCSSアニメーションを0.1倍速で見ると初動は速いが後半は減速するのがわかる。一時停止も試してみよう。
再生回数(animation-iteration-count)がinfinite以外で数回で終わってしまう場合は開発ツールでプロパティにinfiniteを指定すれば何度でも確認できる。