Генератор CSS-анімацій з ключовими кадрами

Правило CSS @keyframes — це, по суті, маленька шкала часу: набір відсоткових контрольних точок, кожна з яких визначає, як має виглядати властивість саме в цей момент, а браузер інтерполює все між ними. Створення вручну означає тримати в голові одразу кілька таких відсоткових точок для кількох властивостей — цей генератор перетворює цю шкалу часу на те, що ви можете бачити й перетягувати: одна горизонтальна доріжка на кожну властивість, з маркером зупинки на кожній контрольній точці.

Центральним елементом є повзунок прокручування. Перетягніть його в будь-яку точку між 0% і 100%, і вікно попереднього перегляду миттєво покаже точний комбінований стан у цю мить — не найближчий ключовий кадр, а справжнє лінійно інтерпольоване значення, обчислене між тими двома зупинками, які оточують повзунок на кожній активній доріжці. Числові властивості, такі як позиція, обертання і масштаб, інтерполюються як звичайні числа; колір тла інтерполюється незалежно для кожного каналу — червоного, зеленого та синього, — що забезпечує плавний перехід кольору через проміжні відтінки замість стрибка між заданими кольорами.

Кілька доріжок автоматично обʼєднуються в одну узгоджену анімацію: усі властивості, повʼязані з трансформацією (переміщення, обертання, масштабування), зливаються в єдиний запис transform на кожному відсотковому ключовому кадрі, тоді як прозорість та колір тла залишаються на окремих рядках — точно так, як виглядав би справжній CSS, написаний вручну. Відсоткові точки, де певна доріжка не має явної зупинки, навмисно пропускаються в оголошеннях цієї властивості — браузер заповнює проміжок між наявними зупинками власною інтерполяцією ключових кадрів, так само, як для будь-якого правила @keyframes, написаного вами вручну.

П’ять пресетів — відскок, тремтіння, пульсація, зникнення та вʼїзд — завантажують повну, готову до налаштування шкалу часу (включно з розумною тривалістю, функцією часу та кількістю повторень) за один клік. Натисніть «Відтворити» в будь-який момент, щоб побачити справжню CSS-анімацію на елементі попереднього перегляду, згенеровану на льоту через динамічно впроваджену таблицю стилів, а потім скопіюйте повний блок @keyframes разом із скороченим записом .animated-element { animation: ... } прямо у свій проєкт. Як і кожен інструмент на цьому сайті, все виконується локально в браузері, і нічого ніколи не завантажується.