Генератор CSS-анімації
Перетворіть кроки percent;property:value на блок @keyframes та його скорочення анімації.
Генератор CSS-анімації
Вставляйте кроки keyframe як percent;property:value — по одному рядку для кожної зупинки (наприклад, 0;opacity:0 та потім 100;opacity:1) — і цей інструмент збирає повний блок @keyframes та відповідне оголошення скорочення анімації. Додавайте кілька пар property:value на один рядок, розділені крапками з комою, щоб анімувати кілька властивостей на одній зупинці, і повторно використовуйте відсоток на кількох рядках, щоб додавати властивості до нього.
Виберіть готовий шаблон — затухання, слайд, пульс, тремтіння або стрибок — щоб пропустити ручне написання кроків і отримати готову анімацію зі всіма доступними параметрами, або переключіться на користувацький для керування кожною зупинкою з вашого власного введення. Інші параметри формують скорочення анімації: назва встановлює ідентифікатор, загальний для правила @keyframes та оголошення анімації, тривалість і затримка вказані в секундах, а функція синхронізації охоплює всі стандартні ключові слова плюс користувацьку криву cubic-bezier() для точної форми ускорення. Встановіть анімацію на повторення фіксованої кількості разів або включіть нескінченність, виберіть напрямок (нормально, зворотне, чередування, чередування в зворотному порядку) та режим заповнення для того, що відбувається до і після її запуску.
Включіть опцію префікса webkit для випуску блоку @-webkit-keyframes та рядка -webkit-animation для старіших версій Safari та Android WebView. Значення відсотків поза межами 0–100 зжимаються в діапазон, "from" і "to" приймаються як псевдоніми для 0 та 100, а пусті або невірно сформовані рядки пропускаються замість порушення виведення. Лічильник під виведенням повідомляє, скільки зупинок keyframe було створено та точну кількість символів.