Словами самого skill
Это навык для реализации, а не аудита: он превращает запрос на анимацию в реализацию, которая выдержит строгий ревью, работая в фиксированной последовательности — стоит ли анимировать вообще, назначение, инструмент, свойства, кривая и длительность, прерывание, выход — а затем пишет код.
Он предназначен для дизайнеров и разработчиков, которым нужно готовое решение, а не набор вариантов. Конкретика берётся из жёстких таблиц: уровни частоты, только transform и opacity, именованные кривые cubic-bezier, диапазоны длительности для каждого элемента, а также правила отключения при reduced-motion и hover, поставляемые вместе с анимацией. Для аудита кодовой базы или разбора диффа используйте смежные skill.
Как это работает
- 01Сначала фильтр по частоте
Первый шаг может провалить задачу ещё до появления кода: всё, что открывается более 100 раз в день или запускается сочетанием клавиш, не должно получать анимацию вовсе.
- 02Назовите цель одним словом
Никакой цели, никакой анимации. Просьба сделать это только потому, что выглядит круто, — на элементе, который пользователь видит постоянно, — повод остановиться, а не делать.
- 03Берите самый дешёвый инструмент, который работает
Пройдите по таблице инструментов сверху вниз и остановитесь на первом подходящем варианте: CSS transition, @starting-style, CSS animation, WAAPI, Motion.
- 04Ограничьте свойства
Transform и opacity выполняют всю работу, потому что они пропускают этапы layout и paint и выполняются на GPU; clip-path — узаконенное четвёртое свойство, а анимация height допускается только для аккордеонов.
- 05Зафиксируйте кривую и длительность по таблицам
Появление и исчезновение — ease-out, движение на экране — ease-in-out, наведение и изменение цвета — ease, постоянное движение — linear, по умолчанию — ease-out.
- 06Прерывание и выход из плана
Быстро повторно запускаемые элементы используют переходы, жесты — пружинную анимацию, а выход отражает вход, так что свайп для закрытия воспринимается как очевидный.