Я столкнулся с несколькими сайтами, которые теперь используют анимацию в стиле ключевого кадра CSS3 и решили протестировать ее на своих собственных сайтах. Тем не менее, это приводит меня к загадке: Обычно, прежде чем я передам файл CSS на сайт, я буду использовать инспектор браузера (Ctrl+Shift+I в Chrome, Opera и FF; F12 в IE) для настройки и изменения CSS, чтобы увидеть, что мне больше всего нравится. Тем не менее, не представляется возможным изменить ключевые кадры анимации CSS3 с помощью инспектора браузера! Для меня это крайне затрудняет, так как это заставляет меня записывать файл CSS каждый раз, когда я хочу изменить какой-либо нюанс анимации, а также до 15-минутной задержки с сервера. Есть ли способ локально изменить ключевые кадры анимации CSS3 с помощью инспектора браузера?
Можно ли проверить ключевые кадры анимации CSS3 с помощью инспектора браузера?
Ответ 1
Huzzah hoorah и hooray! Это вполне возможно сегодня! Chrome Dev Tools добавила вкладку Animation! Просто откройте инструменты dev и нажмите эту маленькую красоту: 
И для отладки анимаций доступен целый набор полезных инструментов: D
Ответ 2
В Chrome:
- Ctrl + Shift + я
- Выберите элемент
- правый столбец: нажмите на ссылку css (например, style.css: 24)
- Теперь вы можете редактировать свой css файл
Примечания:
- Вы не можете редактировать css в правом столбце и в css файле одновременно
- Чтобы перезапустить анимацию, удалите -webkit-animation:... и добавьте ее назад
Ответ 3
Если вам нужен еще больший контроль, загрузите Chrome Canary (требуется 64 бит). Существует небольшая кнопка "play" и настройка времени, поэтому вы можете замедлить анимацию и приостанавливать ее, когда захотите. Довольно круто!
Ответ 4
В скором времени это будет через хронологию анимации Chrome Dev Tools.
Пока есть только это тизерное видео: https://www.youtube.com/watch?v=U9xfYbKxosI
Ответ 5
Начиная с Chrome 50 теперь, наконец, можно редактировать ключевые кадры CSS.
https://twitter.com/ChromeDevTools/status/694966453376675840
