Реклама мешает? Идти Без рекламы Сегодня 

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

ЦветРазработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Анимационный шаблон

Предустановленный

Настройки анимации

Имя

Продолжительность (с)

Смягчение

cubic-bezier()

Итерации

Бесконечный

Направление

Режим заполнения

Кадры

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

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

Создание анимаций @keyframes CSS визуально с живым предварительным просмотром. Выберите из 10 популярных шаблонов, таких как всплеск, тряска, пульсация, появление, появление с левого края, вращение, колебание, резиновый эффект, мигание и колебание — или создайте собственный кастомный кадровый анимационный эффект с нуля. Настройте продолжительность, смягчение, количество итераций, направление и режим заполнения, затем скопируйте сгенерированный код CSS.

Как использовать

Выберите шаблон анимации или начните с кастомной анимации. Настройте параметры анимации — имя, продолжительность, функцию смягчения, количество итераций, направление и режим заполнения. Редактируйте остановки кадров, установив процент, значение трансформации и прозрачность для каждого остановки. Добавляйте или удаляйте остановки кадров по мере необходимости. Следите за обновлением живого предварительного просмотра в реальном времени, затем скопируйте сгенерированный код CSS.

Возможности

10 шаблонов анимации — Всплеск, тряска, пульсация, появление, появление с левого края, вращение, колебание, резиновый эффект, мигание и колебание, готовы к использованию
Редактор кадров — Добавляйте, удаляйте и редактируйте остановки кадров с помощью контролов процентов, трансформации и прозрачности
Живой предварительный просмотр анимации — Следите за тем, как ваша анимация проигрывается на элементе демонстрации в реальном времени при внесении изменений
Полный контроль анимации — Настройте продолжительность, смягчение (включая кастомную cubic-bezier), количество итераций, направление и режим заполнения
Чистый вывод CSS — Генерирует как правило @keyframes, так и сокращённое свойство анимации, готовое к вставке в ваш стиль-лист

Реклама · УДАЛИТЬ?

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

Что такое CSS @keyframes?

CSS @keyframes определяют этапы последовательности анимации. Каждый кадр указывает стили в определённый момент во времени анимации, выраженный в процентах от 0% (начало) до 100% (конец). Браузер интерполирует значения свойств между кадрами, чтобы создать плавные переходы.
Какова разница между CSS-переходами и CSS-анимациями?

CSS-переходы анимируют изменение свойства между двумя состояниями (например, при наведении), инициированное изменением состояния. CSS-анимации с использованием @keyframes могут работать автономно, циклично, иметь несколько промежуточных шагов и предоставлять больше контроля с помощью свойств, таких как animation-direction, iteration-count и fill-mode.
Какова функция свойства animation-fill-mode?

Свойство animation-fill-mode управляет тем, как применяются стили до и после проигрывания анимации. «вперёд» сохраняет стили последнего кадра после окончания анимации. «назад» применяет стили первого кадра в период задержки. «оба» применяет оба поведения. «отсутствует» возвращает элемент в исходные стили.
Что такое функция смягчения cubic-bezier?

Функция смягчения cubic-bezier определяет кастомную кривую скорости для анимации с помощью четырёх контрольных точек (x1, y1, x2, y2). Она определяет, насколько быстро или медленно проходит анимация на разных этапах времени. Популярные шаблоны, такие как ease, ease-in и ease-out, являются сокращёнными названиями для определённых значений cubic-bezier.