How do I create and attach a CSS3 animation directly in chrome inspector?

Question

I know that you can attach hover events directly from the inspector, but how does one create and attach a CSS3 animation directly in the inspector?

For example, if I try to create something like the following animation using the inspector:

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

the browser will stop registering the code after the first colon(:) between the words "background" and "red".

Lucas Kauz · Accepted Answer

You can edit directly in the css code.

Select the element in the inspector
Click on the target css ( the file above the matched css rules and bellow the 'matched css rules' title)
Do your modifications

If you want to select the css file:

And finally, if you don't have a CSS file you can put your code in the HTML using

Outside the tag put your custom style, like:

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

Donate For Us