Генератор CSS-анімацій — keyframes з живим переглядом

Animation Preset

Duration: 0.6s

Timing Function

Iteration

Box

CSS Output

Про цей інструмент

Генератор CSS-анімацій створює анімації @keyframes з 14 шаблонів, як-от поява, виїзд, поява з відскоком, пульсація, обертання, тремтіння та масштабування, з налаштуванням тривалості, функції таймінгу та кількості повторів.

Як користуватися

Виберіть шаблон анімації.
Задайте тривалість, функцію таймінгу та кількість повторів.
Натисніть «Повторити», щоб переглянути її.
Натисніть «Копіювати CSS», щоб отримати @keyframes і правило animation.

Корисно знати

CSS-анімація складається з двох частин: правила @keyframes і властивості animation на елементі.
Анімувати transform і opacity зазвичай найкраще з погляду продуктивності.
Функції таймінгу на кшталт ease-out починають швидко й сповільнюються — для появи елементів це виглядає природно.
Враховуйте медіазапит prefers-reduced-motion для користувачів, які попросили менше руху.
Нескінченна кількість повторів пасує індикаторам завантаження; ефекти появи зазвичай відтворюються один раз.

Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.

Поширені запитання

Як створити CSS-анімацію?

Опишіть рух у правилі @keyframes, а потім підключіть його через animation: name duration timing iteration. Генератор напише обидві частини за вас.

Чим CSS-переходи відрізняються від анімацій?

Переходи (transitions) анімують зміну між двома станами, коли змінюється властивість, наприклад при наведенні. Анімації використовують ключові кадри, можуть запускатися автоматично й повторюватися.

Як зациклити анімацію назавжди?

Задайте кількість повторів infinite, наприклад animation: spin 1s linear infinite.

Чи впливають CSS-анімації на доступність?

Великий або безперервний рух може заважати деяким користувачам. Обгортайте необов’язкові анімації в @media (prefers-reduced-motion: no-preference).