Генератор на CSS ключови кадри
Създайте истински @keyframes анимации върху многопистова времева линия – стопове за transform, opacity и background-color на трак – с плъзгащ се плейхед, който показва точното интерполирано междинно състояние.
🔒 Обработва се изцяло във вашия браузър - нищо, което въвеждате тук, никога не се качва.
Резултат
Едно CSS @keyframes правило всъщност е малка времева линия: набор от проценти контролни точки, всяка от които указва как трябва да изглежда дадено свойство в точния момент, а браузърът интерполира всичко помежду им. Ръчното създаване изисква да държите няколко такива проценти контролни точки в главата си едновременно за няколко свойства – този генератор превръща времевата линия в нещо, което можете реално да видите и влачите: по един хоризонтален коридор за свойство, с маркер за стоп на всяка контролна точка.
Централният елемент е превъртащият се плейхед. Плъзнете го до която и да е точка между 0% и 100% и полето за визуализация скача до точното комбинирано състояние в този миг – не до най-близкия ключов кадър, а до реално линейно интерполирана стойност, изчислена между двата стопа, които обграждат плейхеда за всеки активен трак. Числовите свойства като позиция, завъртане и мащаб се интерполират като обикновени числа; background-color интерполира всеки червен, зелен и син канал поотделно, което прави цветовият трак да прелива плавно през междинни нюанси, вместо да скача между зададените цветове.
Множество тракове се комбинират автоматично в една свързана анимация: всички transform-базирани свойства (преместване, завъртане, мащабиране) се обединяват в един transform декларация за всеки процент ключов кадър, докато opacity и background-color остават на отделни редове, точно както би изглеждал реалният ръчно написан CSS. Процентите, в които даден трак няма явен стоп, просто се изпускат от декларациите на това свойство целенасочено – вградената в браузъра интерполация на ключови кадри запълва празнината между наличните стопове, по същия начин като при всяко @keyframes правило, което сте написали ръчно.
Пет предварителни настройки – отскок, трептене, пулсиране, избледняване и вмъкване – зареждат пълна, готова за настройка времева линия (включително смислена продължителност, времева функция и брой повторения) с един клик. Натиснете „Пускане“ по всяко време, за да видите истинската CSS анимация върху елемента за визуализация, генерирана в реално време чрез динамично инжектиран стилов лист, след което копирайте целия @keyframes блок плюс съкратения запис .animated-element { animation: ... } направо във вашия проект. Както всеки инструмент на този сайт, всичко работи локално в браузъра и нищо не се качва никъде.