CSS3 キーフレーム スタイルのアニメーションを利用しているサイトをいくつか見つけたので、自分のサイトでテストすることにしました。ただし、これは私を難問に導きます: 通常、CSS ファイルをサイトにコミットする前に、ブラウザーのインスペクター ( Ctrl+Shift+IChrome、Opera、および FF ではF12、IE では) を使用して、CSS をローカルで微調整および変更し、自分が何を確認するかを確認します。が一番好き。ただし、ブラウザーのインスペクターを使用して CSS3 アニメーションのキーフレームを変更する方法はないようです。アニメーションのニュアンスを変更するたびに CSS ファイルをコミットする必要があり、サーバーから最大 15 分の遅延が発生するため、これは私にとって大きな障害です。ブラウザーのインスペクターで CSS3 アニメーションのキーフレームをローカルで変更する方法はありますか?
質問する
23964 次
6 に答える
14
Chrome 50 以降、ついに CSS キーフレームを編集できるようになりました。
https://twitter.com/ChromeDevTools/status/694966453376675840
于 2016-05-19T11:23:59.227 に答える
13
ハザやったー、やったー！今日は完全に可能です！Chrome Dev Tools にアニメーション ツールが追加されました。開発ツールを開き、[その他のツール] ボタンをクリックしてから [アニメーション] をクリックするだけで、アニメーションのデバッグに便利なツール一式を利用できます。
![[その他のツール] ボタンを押して表示されるメニューで、[アニメーション] オプションが選択されていることを示しています](https://i.stack.imgur.com/0BxBl.png)
于 2016-04-14T02:18:56.117 に答える
12
Chrome の場合:
- Ctrl+Shift+I
- 要素を選択します
- 右の列: css リンクをクリックします (例: style.css:24)
- css ファイルを編集できるようになりました
注:
- 右側の列と css ファイルの css を同時に編集することはできません
- アニメーションを再トリガーするには、-webkit-animation:... を削除して、再度追加します
于 2012-10-08T11:19:27.300 に答える
4
さらに細かく制御したい場合は、Chrome Canary をダウンロードしてください (64 ビットが必要だと思います)。小さな「再生」ボタンと時間調整機能があるので、いつでもアニメーションを遅くしたり一時停止したりできます。かなりクール！
于 2015-02-25T19:12:21.817 に答える
4
間もなく、Chrome Dev Tools のアニメーション タイムラインを通じて実現されます。
これまでのところ、このティーザー ビデオしかありません: https://www.youtube.com/watch?v=U9xfYbKxosI
于 2015-07-10T23:25:01.397 に答える