Как создать и прикрепить CSS3-анимацию непосредственно в Chrome Inspector?

Question

Я знаю, что вы можете прикреплять события при наведении курсора непосредственно из инспектора, но как создать и подключить анимацию CSS3 непосредственно в инспекторе?

Например, если я пытаюсь создать что-то вроде следующей анимации с помощью инспектора:

@-webkit-keyframes test{
   0%{background:red}
   100%{background:blue}   
}

браузер прекратит регистрировать код после первого двоеточия (:) между словами "фон" и "красный".

Answer 1

Вы можете редактировать прямо в коде CSS.

1. Выберите элемент в инспекторе
2. Нажмите на целевой CSS (файл над соответствующими правилами CSS и ниже заголовка "соответствующие правила CSS")
3. Делай свои модификации

Если вы хотите выбрать файл CSS:

1. Перейти на вкладку Ресурсы
2. Рамки> (имя рамки)> Таблицы стилей> nameofthecssfile.css

И, наконец, если у вас нет файла CSS, вы можете поместить свой код в HTML, используя

1. Щелкните правой кнопкой мыши тело (или любой другой HTML-тег), выберите "Редактировать как HTML".

2. Вне тега поместите свой собственный стиль, например:

   <Стиль>@ -webkit-keyframes test {
       0% {фон: красный}
       100%{фон: голубой}   
   }<Тело>
       Lorem Ipsum