How to create and attach CSS3 animations directly in chrome inspector?

Question

I know that you can attach hover events directly from the inspector, but how to create and attach CSS3 animations 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".

+4

Conqueror Sep 06 '13 at 13:29

1 answer

Lucas kauz · Accepted Answer · 2013-09-06T13:48:03+0000

You can edit directly in css code.

Select an item in the inspector
Click on the target css (file above the agreed css rules and below the heading "Corresponding CSS Rules")
Make your changes.

If you want to select css file:

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

Outside the tag, put your own style, for example:

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