CSS генератор на анимация на ключови кадри

Правилото на CSS @keyframes всъщност е малка времева линия: набор от процентни контролни точки, всяка от които декларира как трябва да изглежда дадено свойство в този точен момент, като браузърът интерполира всичко между тях. Изграждането на един на ръка означава да поддържате няколко от тези процентни контролни точки в главата си наведнъж в няколко свойства - този генератор превръща тази времева линия в нещо, което всъщност можете да видите и плъзнете: една хоризонтална лента на собственост, с маркер за спиране на всяка контролна точка.

Централният елемент е скрабът за игра. Плъзнете го до която и да е точка между 0% и 100% и полето за предварителен преглед прескача до точното комбинирано състояние в този момент - не най-близкия ключов кадър, а реална линейно интерполирана стойност, изчислена между двете спирания около плейъра на всяка активна песен. Числени свойства като позиция, ротация и мащаб се интерполират като обикновени числа; background-color интерполира всеки червен, зелен и син канал независимо, което е това, което кара цветната следа да избледнява плавно през междинните нюанси, вместо да прескача между цветовете, които всъщност сте задали.

Множество песни се комбинират автоматично в една съгласувана анимация: всяко свойство, базирано на трансформация (преместване, завъртане, мащабиране), се слива в една декларация за трансформация при всеки процент на ключовия кадър, докато непрозрачността и цветът на фона остават на собствените си линии, точно както би изглеждал истинският ръкописен CSS. Процентите, при които дадена песен няма изрично спиране, просто са оставени нарочно извън декларациите на това свойство — собствената интерполация на ключов кадър на браузъра запълва празнината между съществуващите спирания, по същия начин, по който би било за всяко правило @keyframes, което сте въвели на ръка.

Пет предварително зададени настройки - отскачане, разклащане, пулсиране, избледняване и плъзгане - зареждат пълна, готова за настройка времева линия (включително разумна продължителност, функция за време и брой повторения) с едно щракване. Натиснете „Пусни“ във всеки един момент, за да видите как реалната CSS анимация се изпълнява върху елемента за предварителен преглед, генериран в движение чрез динамично инжектиран стилов лист, след което копирайте пълния блок @keyframes плюс стенограмата .animated-element { animation: ... } направо във вашия собствен проект. Като всеки инструмент на този сайт, той работи локално в браузъра, без да се качва нищо.