Тимлид React разработки Совкомбанк Технологий Ира рассказала, как работать с анимациями в инструментах Chrome DevTools.
Материал пригодится разработчикам и тестировщикам веб-приложений.
Как включить: Кнопка more (в виде трёх точек в выдвигающейся панели консоли) ⇒ Анимации
План действий:
🤩 Открываем меню, где появится карточка анимации после её воспроизведения на странице.
🤩 При нажатии на карточку ниже отобразится таблица со свойствами, изменёнными с помощью анимации.
🤩 В первой колонке будут показаны селекторы, на которых анимация применена: теги, классы, id.
🤩 Вторая колонка — таймлайн, где указаны конкретные свойства и длительность их анимирования.
🤩Ползунок можно двигать, чтобы подобрать правильное время применения, если есть сомнения.
🤩Над списком анимаций находится панель управления, где можно изменить скорость всей анимации или поставить её на паузу в нужный момент.
Подробности читай в статье.
🔥– спасибо, было полезно
👍🏻– интересно
🤔– иду пробовать
#полезное
@sovcom_tech