是否可以使用浏览器检查器检查CSS3动画关键帧？
Sup*_*tar 29 browser css3 web-inspector css-animations
我现在遇到了一些利用CSS3关键帧式动画的网站,并决定在我自己的网站上测试它.然而,这让我陷入了一个难题:通常在我将CSS文件提交到网站之前,我将使用浏览器的检查器(Ctrl+Shift+I在Chrome,Opera和FF; F12在IE中)在本地调整和更改CSS以查看我的内容最喜欢.但是,似乎无法使用浏览器检查器更改CSS3动画的关键帧!这对我来说是一个极端的障碍,因为它每次我想要改变动画的任何细微差别时都会强制我提交一个CSS文件,这也会导致服务器延迟15分钟.有什么办法可以用浏览器检查器在本地更改CSS3动画关键帧吗？
Puy*_*yol 11
在Chrome上:
- Ctrl + Shift + I
- 选择一个元素
- 右列:单击css-link(例如style.css:24)
- 现在您可以编辑您的css文件
注意:
- 您无法同时在右列和css文件中编辑css
- 要重新触发动画,请删除-webkit-animation:...并将其添加回来
Huzzah hoorah和万岁!今天完全有可能!Chrome Dev Tools添加了动画标签!只需打开开发工具,然后点击这个小美女:
还有一整套很酷的工具可用于调试动画:D
- @MeltingDog我没有时间更新答案,但这是从工具栏中的图标移动到辅助检查器中的菜单项(你知道当你遇到逃生时出现的那个东西吗？). (2认同)
从Chrome 50开始,它现在终于可以编辑CSS关键帧了.
https://twitter.com/ChromeDevTools/status/694966453376675840
- 动画编辑器允许您仅编辑动画延迟和动画持续时间，但不能编辑关键帧。 (3认同)