Generator animacije ključnih okvirjev CSS

Pravilo CSS @keyframes je v resnici majhna časovnica: niz odstotnih kontrolnih točk, od katerih vsaka določa, kako naj bi bila lastnost videti v tistem trenutku, pri čemer brskalnik interpolira vse vmes. Ročna izdelava enega pomeni, da imate v glavi več teh odstotnih kontrolnih točk hkrati v več lastninah – ta generator to časovnico spremeni v nekaj, kar lahko dejansko vidite in povlečete: en vodoravni pas na lastnino, z oznako postanka na vsaki kontrolni točki.

Osrednji del je igralna glava za čiščenje. Povlecite ga na katero koli točko med 0 % in 100 % in polje za predogled v tistem trenutku skoči v točno kombinirano stanje – ne na najbližjo ključno sličico, temveč na resnično linearno interpolirano vrednost, izračunano med katerima koli mestoma, ki obkrožata predvajalno glavo na vsaki aktivni skladbi. Numerične lastnosti, kot so položaj, rotacija in merilo, se interpolirajo kot navadna števila; barva ozadja neodvisno interpolira vsak rdeči, zeleni in modri kanal, zaradi česar barvna sled gladko zbledi skozi vmesne odtenke, namesto da skače med barvami, ki ste jih dejansko nastavili.

Več sledi se samodejno združi v eno skladno animacijo: vsaka lastnost, ki temelji na transformaciji (premakni, zasukaj, pomanjšaj), se združi v eno deklaracijo transformacije pri vsakem odstotku ključne sličice, medtem ko motnost in barva ozadja ostaneta v svojih lastnih linijah, natanko tako, kot bi izgledal pravi ročno napisan CSS. Odstotki, pri katerih določena sled nima eksplicitnega postanka, so preprosto namerno izpuščeni iz deklaracij te lastnosti – lastna interpolacija ključnih sličic brskalnika zapolni vrzel med postanki, ki že obstajajo, na enak način kot za katero koli pravilo @keyframes, ki ste ga vnesli ročno.

Pet prednastavitev — odboj, tresenje, utrip, zbledenje in drsenje — z enim klikom naloži celotno časovnico, ki je pripravljena za prilagajanje (vključno z razumnim trajanjem, funkcijo merjenja časa in številom ponovitev). Kadar koli pritisnite Predvajaj in si oglejte pravo animacijo CSS, ki se izvaja na elementu predogleda, sproti ustvarjeno prek dinamično vstavljene slogovne tabele, nato kopirajte celoten blok @keyframes in .animated-element { animation: ... } stenografijo naravnost v svoj projekt. Kot vsako orodje na tem spletnem mestu, se vse izvaja lokalno v brskalniku in ni nikoli naloženo nič.