如何在chrome检查器中直接创建和附加CSS3动画？

Question

我知道您可以直接从检查器附加悬停事件,但是如何直接在检查器中创建和附加CSS3动画？

例如,如果我尝试使用检查器创建类似以下动画的内容:

@-webkit-keyframes test{
   0%{background:red}
   100%{background:blue}   
}

浏览器将停止在"background"和"red"之间的第一个冒号(:)之后注册代码.

Answer 1

您可以直接在css代码中编辑.

如果要选择css文件:

最后,如果您没有CSS文件,可以使用HTML将代码放入HTML中

在标签之外放置您的自定义样式,如:

<style>
@-webkit-keyframes test{
    0%{background:red}
    100%{background:blue}   
}
</style>
<body>
    lorem ipsum
</body>