Генератор CSS-анимаций

Кадры и плавность

Анимация собирается из кадров на шкале от 0 до 100%: у каждого кадра сдвиг, поворот, масштаб, прозрачность и по желанию цвет фона. Сдвиг, поворот, масштаб и прозрачность браузер обрабатывает без перерисовки страницы, поэтому такая анимация идёт ровно и на слабых телефонах.

Кривую cubic-bezier можно тянуть мышью, а шарики рядом показывают разницу с ease и linear. Пружина и отскок записываются через linear(): кривой cubic-bezier колебания не описать. Для браузеров без linear() в код попадает запасная кривая.

Что уже есть в готовом коде

В код добавлен блок prefers-reduced-motion. У тех, кто попросил систему уменьшить движение, анимация пройдёт за миллисекунду, и элемент сразу окажется в конечном виде. Людям с укачиванием и вестибулярными нарушениями так легче.

Имя анимации проверяется по правилам CSS: с цифры, с пробелом или словом вроде ease оно сломало бы код. Генератор скажет и о задержке без первого кадра, и о скачке в конце, и о движении дольше пяти секунд.