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

StackOverflow https://stackoverflow.com/questions/18659056

Pergunta

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

Foi útil?

Solução

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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top