How to add @keyframes rule through inspect element?

Question

I constantly like to customize web pages that I use frequently through inspect element to be more pleasing for me, however, I've been constantly failing at adding a @keyframes rule to css. Everytime I click "New Style Rule" and type my code, it simply disappears.

  0%{
    text-shadow: 0 0px 15px #f0f;
  }
  33%{
    text-shadow:0 0px 15px #0ff;
  }
  66%{
    text-shadow: 0 0px 10px #0f0;
  }
  100%{
    text-shadow: 0 0px 10px #ff0;
  }
}

I have noticed in other websites that use keyframes that they are separated from regular classes, and I cannot interact in any way with it through inspect element. @keyframe in inspect element

Is it impossible to add keyframes through inspect element alone?

score 1 · Answer 1 · answered May 30 '20 at 01:38

there are some chrome extensions that helps with page css editing, like amino.

alternatively, you may handle the css file directly at Sources tab.

At Sources tab you have all content files served including css files. the css files will be in purple. most likely it's compressed, but you can pretty print with {} button in the bottom left. once there, you can edit it anyway you like it, do your tests, and see translated to the page layout.

How to add @keyframes rule through inspect element?

1 Answers1