С помощью инспектора анимаций в Хроме можно прямо на странице подкрутить анимации без знания ЦСС и функций сглаживания.
Инспектор анимаций находится в отдельной вкладке в выдвигающейся панели (Console Drawer), которую можно открыть с помощью клавиши Esc или через меню. Если вкладку не видно, то её можно включить в выпадающем списке:
Открытый инспектор анимаций записывает все анимации, происходящие на странице, и отображает их в виде схем. Линейки в схеме соответсвуют движениям в анимации, поэтому, чем сложнее анимация, тем насыщеннее будет схема:
При наведении на схему, появится превью анимации. При клике, анимация проиграется заново, а схема раскроется в более подробную, на которой видно как свойства изменялись на определённых отрезках времени и с какими функциями сглаживания:
Инспектор позволяет перезапустить анимацию, проиграть её на замедленной скорости или перемотать её на нужный отрезок:
Схема анимаций интерактивная, поэтому можно на месте подвигать анимации и поиграть с их длиной:
Наконец, если кликнуть на отрезок с анимацией, то во вкладке стилей отобразятся ЦСС свойства, применённые к элементу. Среди этих свойств будет transition, которое задаёт функцию сглаживания анимации. Рядом с ней будет значок с иконкой кривой линии, при клике на который открывается редактор функции сглаживания. В нём можно выбрать один из предложенных вариантов или накрутить свой. К сожалению, инспектор анимаций пока не умеет подхватывать изменения фунция сглаживания на лету, поэтому анимацию придётся перезапускать вручную:
Вот и всё. С помощью инспектора можно рассмотреть анимацию повнимательнее, немного её подкрутить и передать результат технологу в понятном для него виде.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.