UTILS.
100% в браузере
⤿

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

Создайте анимацию по ключевым кадрам, смотрите превью и копируйте CSS.

Об этом инструменте

Выберите готовую анимацию с длительностью, функцией времени и числом повторов, наблюдайте за её работой вживую, затем скопируйте правила @keyframes и animation. Всё работает в вашем браузере.

Часто задаваемые вопросы

Что задаёт число повторов?
Оно определяет, сколько раз проигрывается анимация; выберите infinite для бесконечного цикла или число для запуска указанное количество раз.
Как перезапустить анимацию?
Нажмите «Повторить» — это на мгновение убирает и снова применяет анимацию, чтобы превью проигралось заново с первого ключевого кадра.

Больше инструментов