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

【问题标题】：Is it possible to inspect CSS3 animation keyframes with a browser inspector?是否可以使用浏览器检查器检查 CSS3 动画关键帧？
【发布时间】：2012-08-31 13:03:04
【问题描述】：

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

【问题讨论】：

标签： css browser css-animations web-inspector

【解决方案1】：

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

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

【讨论】：

有趣的解决方法。它可以工作，但有点麻烦 :P 有 Opera、FF、Safari 或 IE 的解决方案吗？这就是让我无法接受的全部原因
修正：不再需要 Opera 答案

【解决方案2】：

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

Instructional video

【讨论】：

感谢您花时间和精力回答，但它并没有真正回答我的问题。
是的...实际上无法在检查器中看到关键帧。所以，我猜最后的答案是“不”。我基本上采用我的关键帧样式并将它们放入主要元素并在检查器中调整它们。除了 15 分钟的服务器延迟之外，这应该可以正常工作。我认为这是更大的问题。

【解决方案3】：

很快就会通过 Chrome 开发工具的动画时间线。

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

【讨论】：

哇，这看起来就像我需要的一切，还有更多！我等不及了！

【解决方案4】：

Huzzah 万岁，万岁！今天完全有可能！ Chrome Dev Tools 添加了一个动画工具！只需打开开发工具并单击“更多工具”按钮，然后单击“动画”，一整套很酷的工具都可用于调试动画?

【讨论】：

@MeltingDog 我没有时间更新答案，但这已从工具栏中的图标移动到辅助检查器中的菜单项（你知道当你命中逃跑？）。
终于可以更新答案了?现在反映了现实

【解决方案5】：

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

【讨论】：

我的答案没有添加什么？
动画编辑器允许您仅编辑动画延迟和动画持续时间，但不能编辑关键帧。
漂亮！我喜欢这些现在既可编辑又可检查:)

【解决方案6】：

由于大多数选项已被移动或更改，因此在 Chrome 上获得此功能需要一段时间。

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

在火狐（开发者版）上，有一个显眼的Animation Tab，如下图：

【讨论】：