⭐ 0
🔍
Текст Слика ПДФ и документи Аудио Музика Електроника Време Комуналне услуге Валидатори Езотерично Игре

Генератор CSS кључних анимација

Направите праве @keyframes анимације на временској линији са више трака — зауставне тачке за трансформацију, прозирност и боју позадине — са клизачем који приказује тачно интерполирано стање између кључних кадрова.

🔒 У потпуности се обрађује у вашем претраживачу — ништа што овде унесете се никада не отпрема.

Кликните било где на траку да додате тачку. Превуците тачку да је померите или уредите њене % и вредносна поља испод траке. Двапут кликните тачку да је уклоните (најмање 2 по траци).

Обрада... 0%

Резултат

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

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

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

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

Уживате у овом алату? Мислите да је овај производ користан? Видите потенцијал у њему и желите да га подржите?

🛡️
Извршава се у прегледачу

Ваши фајлови и уноси никада не напуштају овај уређај. Обрада се одвија потпуно офлајн. 100% безбедно.

Прихваћени формати и правила

  • Временска линија са више трака за трансформацију (translateX, translateY, rotate, scale), прозирност и боју позадине, свака са сопственим тачкама које се превлаче.
  • Права линеарна интерполација — нумеричке вредности и RGB канали за боје — омогућава преглед прелаза између било које две тачке на траци.
  • Дугме за репродукцију примењује стварни генерисани @keyframes CSS на преглед помоћу динамички убаченог стила, уз могућност копирања целог @keyframes блока и скраћеног записа анимације.

Кључне предности

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

Случајеви коришћења

  • • Повуците клизач на било коју тачку у bounce или pulse анимацији да бисте видели тачно реално интерполирано стање усред анимације пре него што пошаљете CSS.
  • • Спојите translateX траку и opacity траку заједно да направите праву slide-in-and-fade улазну анимацију, а затим копирајте комплетне @keyframes + animation скраћени запис.
  • • Додајте background-color траку уз scale траку да заједно анимирате боју и величину дугмета, гледајући како се RGB канали уживо стапају док померате клизач.