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

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


You can edit directly in the css code.

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

If you want to select the css file:

  1. Go to the tab Resources
  2. Frames > (name of the frame) > Stylesheets > nameofthecssfile.css

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

  1. Right click on the body(or any other html tag), select Edit as HTML
  2. Outside the tag put your custom style, like:

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