Инструменты Разработчика

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

Выберите пресет, настройте скорость и тайминг — получите готовый CSS @keyframes.

Инструмент №
104
Работает в браузере
Без сервера

Что делает Генератор CSS-анимаций?

Генератор CSS-анимаций создаёт @keyframes-анимации с живым предпросмотром: выберите пресет (fade, slide, bounce и другие), настройте параметры и получите готовый CSS-код.

Как использовать Генератор CSS-анимаций?

Выберите пресет анимации из списка.
Настройте длительность, задержку, повторения, тайминг и направление.
Нажмите «Воспроизвести» для предпросмотра и скопируйте CSS-код.

Основные возможности

6 пресетов: fade, slide-up, slide-down, bounce, spin, pulse, shake
Управление длительностью, задержкой, повторениями, таймингом и направлением
Живой предпросмотр с готовым CSS-кодом

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

Можно ли использовать код в любом браузере?

CSS-анимации поддерживаются во всех современных браузерах. Префиксы не нужны.

Как применить анимацию к конкретному элементу?

Скопируйте код @keyframes и примените свойство animation к нужному элементу в вашем CSS.

Этот инструмент бесплатный?

Да, инструмент полностью бесплатный и не требует регистрации.

Мои данные сохраняются?

Нет. Все вычисления выполняются только в вашем браузере — данные не отправляются на сервер.