现在，我遇到了一些利用 CSS3 关键帧样式动画的网站，并决定在我自己的网站上进行测试。然而，这给我带来了一个难题：通常在我向网站提交 CSS 文件之前，我会使用浏览器的检查器（Ctrl+Shift+I在 Chrome、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
Huzzah 万岁，万岁！今天完全有可能！Chrome Dev Tools 添加了一个动画工具！只需打开开发工具并单击“更多工具”按钮，然后单击“动画”，一整套很酷的工具可用于调试动画
于 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 开发工具的动画时间线。
到目前为止只有这个预告视频：https ://www.youtube.com/watch?v=U9xfYbKxosI
于 2015-07-10T23:25:01.397 回答
1
由于大多数选项已被移动或更改，因此在 Chrome 上获得此功能需要一段时间。
这是通过以下屏幕截图所示的 4 个步骤在 chrome 上获取它的方法：
在Firefox（开发者版）上，有一个显眼的Animation Tab，如下图：
于 2020-04-22T17:14:32.897 回答