Генератор CSS Keyframe-анімацій

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

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

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

П'ять пресетів — bounce, shake, pulse, fade і slide-in — завантажують повну, готову до редагування шкалу часу (включно з розумною тривалістю, функцією швидкості та кількістю повторів) в один клік. Натисніть Play в будь-який момент, щоб побачити реальну CSS-анімацію на прев'ю-елементі, згенеровану на льоту через динамічно вбудований аркуш стилів, а потім скопіюйте повний блок @keyframes разом зі скороченням .animated-element { animation: ... } прямісінько у свій проєкт. Як і кожен інструмент на цьому сайті, усе працює локально в браузері — нічого ніколи не завантажується на сервер.