是否可以使用浏览器检查器检查CSS3动画关键帧？

Question

我现在遇到了一些利用CSS3关键帧式动画的网站，并决定在我自己的网站上测试它。然而，这让我陷入了一个难题：通常在我将CSS文件提交到网站之前，我将使用浏览器的检查器（Chrome，Opera和FF上的Ctrl+Shift+I; IE中的F12）在本地调整并更改CSS以查看我最喜欢的内容。但是，似乎无法使用浏览器检查器更改CSS3动画的关键帧！这对我来说是一个极端的障碍，因为它每次我想要改变动画的任何细微差别时都会强制我提交一个CSS文件，这也会导致服务器延迟15分钟。 有什么方法可以使用浏览器检查器在本地更改CSS3动画关键帧吗？

Answer 1

在Chrome上：
  - Ctrl + Shift + I
  - 选择元素
  - 右栏：点击css-link（例如style.css：24）
  - 现在你可以编辑你的css文件了

注意：
- 您不能同时在右栏和css文件中编辑CSS - 要重新触发动画，请删除-webkit-animation：...并将其添加回来

Answer 2

Huzzah hoorah和万岁！今天完全有可能！ Chrome Dev Tools添加了动画标签！只需打开开发工具，然后点击这个小美女：并且可以使用一整套很酷的工具来调试动画：D

Answer 3

自Chrome 50以来，它现在终于可以编辑CSS关键帧了。 https://twitter.com/ChromeDevTools/status/694966453376675840

Answer 4

如果您想要更多控制权，请下载Chrome Canary（我相信需要64位）。有一个“播放”按钮和时间调整，因此您可以减慢动画速度并随时暂停。非常酷！

Instructional video

Answer 5

很快就会通过Chrome Dev Tools＆＃39;动画时间轴。

到目前为止，只有这个预告视频：https://www.youtube.com/watch?v=U9xfYbKxosI

Answer 6

由于大多数选项已被移动或更改，因此在Chrome上花了一段时间。

这是通过以下屏幕截图所示的4个步骤在chrome上获取它的方法：

在Firefox（开发人员版）上，有一个醒目的“动画”标签，如下所示：