CSS pagrindinių kadrų animacijos generatorius

CSS @keyframes taisyklė iš tikrųjų yra maža laiko juosta: procentinių kontrolinių taškų rinkinys, kiekvienas nurodantis, kaip nuosavybė turėtų atrodyti konkrečiu momentu, o naršyklė interpoliuoja viską tarp jų. Sukurti vieną rankiniu būdu reiškia laikyti kelis iš šių procentinių kontrolinių punktų vienu metu keliose nuosavybėse – šis generatorius paverčia tą laiko juostą kažkuo, kurį iš tikrųjų galite pamatyti ir nuvilkti: viena horizontali juosta kiekvienai nuosavybei su sustojimo žymekliu kiekviename patikros taške.

Centrinė dalis yra šveitimo galvutė. Nuvilkite jį į bet kurį tašką nuo 0 % iki 100 % ir peržiūros laukelis tuo momentu pereis į tikslią kombinuotą būseną – ne artimiausią pagrindinį kadrą, o tikrą tiesiškai interpoliuotą vertę, apskaičiuotą tarp dviejų stotelių, supančių kiekvieno aktyvaus takelio atkūrimo galvutę. Skaitmeninės savybės, tokios kaip padėtis, sukimas ir mastelis, interpoliuojasi kaip paprasti skaičiai; background-color interpoliuoja kiekvieną raudoną, žalią ir mėlyną kanalą atskirai, todėl spalvų takelis sklandžiai išnyksta per tarpinius atspalvius, o ne šokinėja tarp iš tikrųjų nustatytų spalvų.

Keli takeliai automatiškai sujungiami į vieną nuoseklią animaciją: kiekviena transformacija pagrįsta ypatybė (perkelti, pasukti, keisti mastelį) susilieja į vieną transformacijos deklaraciją kiekviename pagrindinio kadro procente, o neskaidrumas ir fono spalva lieka savo eilutėse, lygiai taip, kaip atrodytų tikra ranka parašyta CSS. Procentai, kai tam tikra takelis neturi aiškaus sustojimo, tiesiog tyčia neįtraukiami į tos nuosavybės deklaracijas – pačios naršyklės raktinio kadro interpoliacija užpildo spragą tarp esamų sustojimų, taip pat, kaip tai būtų daroma naudojant bet kurią @keyframes taisyklę, kurią įvedėte ranka.

Penki išankstiniai nustatymai – atšokimas, drebėjimas, pulsavimas, išnykimas ir įslinkimas – vienu paspaudimu įkelia visą, paruoštą koreguoti laiko juostą (įskaitant protingą trukmę, laiko funkciją ir pakartojimų skaičių). Paspauskite Paleisti bet kuriuo metu, kad pamatytumėte tikrą CSS animaciją, kuri veikia peržiūros elemente, sugeneruota dinamiškai įterptame stiliaus lape, tada nukopijuokite visą @keyframes bloką ir .animated-element { animation: ... } santrumpas tiesiai į savo projektą. Kaip ir kiekvienas šios svetainės įrankis, jis veikia lokaliai naršyklėje ir nieko neįkelta.