Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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".

like image 989
Conqueror Avatar asked Sep 06 '13 13:09

Conqueror


1 Answers

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>
    
like image 78
Lucas Kauz Avatar answered Sep 21 '22 17:09

Lucas Kauz