CSS atslēgas kadru animācijas ģenerators

CSS @keyframes kārtula patiešām ir maza laika skala: procentuālo kontrolpunktu kopa, katrs no tiem paziņo, kā konkrētajam rekvizītam vajadzētu izskatīties, pārlūkprogrammai interpolējot visu, kas atrodas pa vidu. Izveidot vienu ar rokām nozīmē paturēt prātā vairākus no šiem procentuālajiem kontrolpunktiem vienlaikus vairākos īpašumos — šis ģenerators pārvērš šo laika skalu par kaut ko tādu, ko var reāli redzēt un vilkt: viena horizontāla josla katram īpašumam ar pieturas marķieri katrā kontrolpunktā.

Centrālā daļa ir skrubja atskaņošanas galviņa. Velciet to uz jebkuru punktu no 0% līdz 100%, un priekšskatījuma lodziņš pāriet uz precīzu kombinēto stāvokli šajā brīdī — nevis tuvākajā atslēgas kadrā, bet gan reālā lineāri interpolētā vērtībā, kas tiek aprēķināta starp divām pieturām, kas ieskauj atskaņošanas galviņu katrā aktīvajā celiņā. Skaitliskās īpašības, piemēram, pozīcija, rotācija un mērogs, interpolē kā vienkāršus skaitļus; Fona krāsa interpolē katru sarkano, zaļo un zilo kanālu neatkarīgi, kas ļauj krāsu celiņam vienmērīgi izbalināt, izmantojot starpkrāsas, nevis pāriet starp faktiski iestatītajām krāsām.

Vairāki celiņi tiek automātiski apvienoti vienā saskaņotā animācijā: katrs uz pārveidošanu balstīts rekvizīts (pārvietošana, pagriešana, mērogošana) tiek apvienots vienā transformācijas deklarācijā katrā atslēgkadra procentuālajā daļā, savukārt necaurredzamība un fona krāsa paliek savās līnijās, tieši tā, kā izskatās īsta ar roku rakstīta CSS. Procenti, kuros noteiktajam ierakstam nav skaidras pieturas, tiek vienkārši tīšām izslēgti no šī īpašuma deklarācijām — pārlūkprogrammas pašas atslēgkadra interpolācija aizpilda starpību starp pastāvošajām pieturām, tāpat kā jebkura @keyframes kārtula, kuru ievadījāt ar roku.

Pieci sākotnējie iestatījumi — atlēciens, kratīšana, pulss, izbalēšana un iebīdīšana — ar vienu klikšķi tiek ielādēts pilnīgs, pielāgojams laika skala (tostarp saprātīgs ilgums, laika funkcija un atkārtojumu skaits). Jebkurā brīdī noklikšķiniet uz Atskaņot, lai redzētu, kā priekšskatījuma elementā darbojas īstā CSS animācija, kas tiek ģenerēta dinamiski ievadītā stila lapā, pēc tam kopējiet pilnu @keyframes bloku un .animated-element { animation: ... } saīsinājumu tieši savā projektā. Tāpat kā visi rīki šajā vietnē, tas viss darbojas lokāli pārlūkprogrammā, un nekas nav augšupielādēts.