CSS Atslēgkadru Animācijas Ģenerators
Veidojiet reālas @keyframes animācijas uz vairāku celiņu laika līnijas — transformācija, caurspīdīgums un fona krāsa ar pieturas punktiem katrā celiņā — ar velkamu atskaņošanas slīdni, kas rāda precīzu interpolētu starpstāvokli.
🔒 Pilnībā apstrādāts jūsu pārlūkprogrammā — nekas, ko jūs šeit ievadāt, nekad netiek augšupielādēts.
Rezultāts
CSS @keyframes likums patiesībā ir neliela laika līnija: procentuālu kontrolpunktu kopa, katrs noformulē, kā rekvizītam būtu jāizskatās tieši tajā brīdī, un pārlūkprogramma interpolē visu pa vidu. Veidojot to ar roku, jātur prātā vairāki šādi procentuālie kontrolpunkti vienlaikus vairākiem rekvizītiem — šis ģenerators pārvērš šo laika līniju par kaut ko tādu, ko tiešām var redzēt un vilkt: viena horizontāla josla katram rekvizītam, ar pieturas punkta marķieri katrā kontrolpunktā.
Galvenais elements ir ritināmais atskaņošanas slīdnis. Velciet to uz jebkuru punktu starp 0% un 100%, un priekšskatījuma lodziņš pāries uz precīzu kombinēto stāvokli tajā mirklī — nevis tuvāko atslēgkadru, bet gan reālu lineāri interpolētu vērtību, kas aprēķināta starp tiem diviem punktiem, kuri apņem slīdni katrā aktīvajā celiņā. Skaitliskie rekvizīti, piemēram, novietojums, rotācija un mērogs, tiek interpolēti kā parasti skaitļi; fona krāsa interpolē katru sarkano, zaļo un zilo kanālu neatkarīgi, tāpēc krāsu celiņš vienmērīgi pāriet cauri starpnokrāsām, nevis lec starp iestatītajām krāsām.
Vairāki celiņi automātiski apvienojas vienā sakarīgā animācijā: visi transformācijas rekvizīti (pārvietošana, rotēšana, mērogošana) katrā atslēgkadra procentā saplūst vienā transform deklarācijā, bet caurspīdīgums un fona krāsa paliek savās rindās, tieši tā, kā izskatītos reāls ar roku rakstīts CSS. Procenti, kuros konkrētajam celiņam nav skaidra pieturas punkta, tiek apzināti izlaisti no šī rekvizīta deklarācijām — pārlūkprogrammas pašas atslēgkadru interpolācija aizpilda robu starp esošajiem punktiem, tāpat kā jebkuram ar roku rakstītam @keyframes likumam.
Pieci iestatījumi — atsitiens, kratīšana, pulsēšana, izzušana un iebīdīšanās — ielādē pilnīgu, gatavu regulēšanai laika līniju (ieskaitot saprātīgu ilgumu, laika funkciju un atkārtojumu skaitu) ar vienu klikšķi. Jebkurā brīdī nospiediet "Atskaņot", lai redzētu, kā reālā CSS animācija darbojas priekšskatījuma elementā, kas tiek ģenerēta lidojumā caur dinamiski pievienotu stilu lapu, pēc tam kopējiet pilnu @keyframes bloku kopā ar .animated-element { animation: ... } saīsināto pierakstu tieši savā projektā. Tāpat kā visi šīs vietnes rīki, viss darbojas lokāli pārlūkprogrammā, neko nekur augšupielādējot.