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

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

문제

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

도움이 되었습니까?

해결책

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top