CSSアニメーションをChromeの開発ツールで0.5倍速以下で見る方法

CSSアニメーションをChromeの開発ツールで0.5倍速以下で見る方法

0.5倍速以下で表示

Chromeの開発ツールはCSSアニメーションの再生速度を0.5倍速、0.25倍速、0.1倍速に変更して見ることができる。

やり方は簡単でChromeメニューから「その他ツール→デベロッパーツール」を選択し、ElementsタブのStylesタブの右上にあるCSSアニメーションのボタンを押して倍率をバーをスライドして変更するだけだ。
Chromeメニューから「その他ツール→デベロッパーツール」を選択

ElementsタブのStylesタブの右上にあるCSSアニメーションのボタンを押して倍率をバーをスライドして変更

CSSアニメーションの一時停止

Animationsの一番左にあるボタンを押せばCSSアニメーションを一時停止できる。(absoluteなどを使用したアニメーションは停止できない。)
Chrome開発ツールのCSSアニメーションの一時停止

CSSアニメーションのサンプル

iwb.jp

上記の回転している赤い正方形のCSSアニメーションを0.1倍速で見ると初動は速いが後半は減速するのがわかる。一時停止も試してみよう。

再生回数(animation-iteration-count)がinfinite以外で数回で終わってしまう場合は開発ツールでプロパティにinfiniteを指定すれば何度でも確認できる。