ЦСС Кеифраме Аниматион Генератор

Правило ЦСС @кеифрамес је заиста мала временска линија: скуп процентуалних контролних тачака, од којих свака декларише како би својство требало да изгледа у том тренутку, са претраживачем који интерполира све између. Изградња једне ручно значи држање неколико ових процентуалних контролних тачака у глави одједном на неколико својстава — овај генератор претвара ту временску линију у нешто што заправо можете да видите и превучете: једну хоризонталну траку по имању, са маркером за заустављање на свакој контролној тачки.

Средишњи део је глава за чишћење. Превуците га на било коју тачку између 0% и 100% и оквир за преглед ће у том тренутку скочити у тачно комбиновано стање - не најближи кључни кадар, већ стварну линеарно интерполисану вредност израчунату између било које две тачке које окружују упозорење за репродукцију на свакој активној нумери. Нумеричка својства као што су позиција, ротација и размера се интерполирају као обични бројеви; бацкгроунд-цолор интерполира сваки црвени, зелени и плави канал независно, што чини да колор трака глатко бледи кроз међунијансе уместо да скаче између боја које сте заправо поставили.

Више нумера се аутоматски комбинује у једну кохерентну анимацију: свако својство засновано на трансформацији (померање, ротирање, размера) се спаја у једну декларацију трансформације у сваком проценту кључног кадра, док непрозирност и боја позадине остају на сопственим линијама, баш као што би изгледао прави руком писани ЦСС. Проценти у којима дата нумера нема експлицитну стопу се једноставно намерно изостављају из декларација тог својства — интерполација кључног кадра претраживача испуњава празнину између свих заустављања која постоје, на исти начин на који би то било за било које правило @кеифрамес које сте унели ручно.

Пет унапред подешених вредности — поскакивање, подрхтавање, пулсирање, бледење и увлачење — једним кликом учитавају комплетну временску линију спремну за подешавање (укључујући разумно трајање, функцију времена и број понављања). Притисните Репродукуј у било ком тренутку да видите праву ЦСС анимацију која се покреће на елементу за преглед, генерисану у ходу кроз динамички убачени стилски лист, а затим копирајте цео блок @кеифрамес плус .аниматед-елемент { аниматион: ... } стенографију директно у свој пројекат. Као и свака алатка на овом сајту, све се покреће локално у претраживачу и ништа није учитано.