web-dev-qa-db-ja.com

CSS3アニメーションキーフレームをブラウザーインスペクターで検査することは可能ですか？

CSS3のキーフレームスタイルのアニメーションを利用するいくつかのサイトに出会い、自分のサイトでテストすることにしました。しかし、これは私に難問をもたらします：通常、CSSファイルをサイトにコミットする前に、ブラウザーのインスペクター（Ctrl+Shift+I Chrome、Opera、FFの場合。 F12 IEで）CSSをローカルで微調整および変更して、私が一番好きなものを確認します。ただし、ブラウザインスペクタでCSS3アニメーションのキーフレームを変更する方法はないようです。アニメーションのニュアンスを変更するたびにCSSファイルをコミットする必要があり、サーバーから最大15分の遅延が発生するため、これは私にとって非常に邪魔です。 ブラウザインスペクタでCSS3アニメーションキーフレームをローカルで変更する方法はありますか？

cssbrowsercss-animationsweb-inspector
29
Supuhstar

フザーフーラーとフーレイ！今日は完全に可能です！ Chrome開発ツールにアニメーションタブが追加されました！開発ツールを開いて、この小さな美しさをクリックするだけです Chrome Animation Inspector icon! そして、アニメーションをデバッグするためのクールなツールのスイート全体が利用可能です：D

Google Chrome, open to BHStudios.org with the animation inspector showing.

8
Supuhstar

Chromeの場合：
-Ctrl + Shift + I
-要素を選択してください
-右の列：css-linkをクリックします（たとえば、style.css：24）
-これでcssファイルを編集できます

ノート：
-右側の列とcssファイルで同時にcssを編集することはできません
-アニメーションを再トリガーするには、-webkit-animation：...を削除して追加し直します

11
Puyol

Chrome 50なので、CSSキーフレームを編集できるようになりました。 https://Twitter.com/ChromeDevTools/status/69496645337667584enter image description here

5
GetFree

さらに細かく制御したい場合は、Chrome Canary（64ビットが必要だと思います）をダウンロードします。アニメーションを遅くして一時停止できるように、小さな[再生]ボタンと時間調整があります。かっこいい！

illustrative screenshot説明ビデオ

4
tim92109

間もなく、Chrome Dev Tools 'Animation Timelineを通じて。

これまでのところ、このティーザー動画しかありません： https://www.youtube.com/watch?v=U9xfYbKxosI

4
fregante