Генератор CSS-анимаций
Выберите пресет, настройте тайминг, смягчение, число повторов и направление, и наблюдайте воспроизведение в предпросмотре. Скопируйте @keyframes и сокращённую запись анимации одним кликом, когда результат вас устроит — всё работает в вашем браузере.
Всё работает в вашем браузере. Без загрузки, без регистрации.
Как это работает
Выберите пресет
Начните с появления, сдвига, прыжка, пульсации, вращения или дрожания. Предпросмотр воспроизводит движение сразу после выбора, так что вы видите эффект моментально.
Настройте тайминг
Отрегулируйте длительность, задержку, смягчение, число повторов и направление. Нажимайте «Повторить» в любой момент, чтобы увидеть новые настройки в действии.
Скопируйте CSS
Скопируйте блок @keyframes и сокращённую запись анимации одним кликом и вставьте в свою таблицу стилей — ничего не загружается.