CSS Keyframe Animatsioonigeneraator
Loo ehtsaid @keyframes-animatsioone mitmerajalisel ajateljel — iga raja jaoks transform, opacity ja background-color peatuspunktid — koos lohistatava taasesituspeaga, mis näitab täpset interpoleeritud vaheolekut.
🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.
Tulemus
CSS @keyframes on tegelikult väike ajatelg: protsendipunktidega kontrollpunktide kogum, millest igaüks määrab, milline omadus sel hetkel olema peaks, kusjuures brauser interpoleerib kõik vahepealse. Käsitsi seda ehitades tuleb korraga peas hoida mitut sellist protsendilist kontrollpunkti üle mitme omaduse — see generaator muudab selle ajatelje millekski, mida saad reaalselt näha ja lohistada: üks horisontaalne rada iga omaduse kohta, igal kontrollpunktil peatusmärkija.
Keskmes on keritav taasesituspea. Lohistades seda mis tahes punkti 0% ja 100% vahel, hüppab eelvaatekast täpselt sellesse kombineeritud olekusse sellel hetkel — mitte lähimasse võtmekaadrisse, vaid reaalsesse lineaarselt interpoleeritud väärtusesse, mis on arvutatud taasesituspead ümbritsevate peatuste vahel iga aktiivse raja puhul. Numbrilised omadused nagu asukoht, pööre ja skaala interpoleeritakse tavaliste arvudena; background-color interpoleerib iga punase, rohelise ja sinise kanali eraldi, mistõttu värviraja üleminek on sujuv läbi vahepealsete toonide, mitte hüplev vaid määratud värvide vahel.
Mitu rada ühendatakse automaatselt üheks sidusaks animatsiooniks: kõik transform-põhised omadused (liigutus, pööre, skaala) liidetakse igas võtmekaadri protsendipunktis üheks transform-deklaratsiooniks, samal ajal kui opacity ja background-color jäävad omaette ridadele, täpselt nii, nagu reaalselt käsitsi kirjutatud CSS välja näeks. Protsendipunktid, kus teatud rajal selgesõnaline peatus puudub, jäetakse teadlikult selle omaduse deklaratsioonidest välja — brauseri enda võtmekaadrite interpoleerimine täidab tühimiku olemasolevate peatuste vahel, samamoodi nagu iga käsitsi sisestatud @keyframes reegli puhul.
Viis eelseadistust — põrge, võbin, tukslemine, hajumine ja sisselibisemine — laadivad ühe klõpsuga tervikliku, koheselt kohendatava ajatelje (koos mõistliku kestuse, ajastusfunktsiooni ja korduste arvuga). Vajuta igal hetkel Esita, et näha reaalset CSS-animatsiooni eelvaateelemendil, mis genereeritakse lennult dünaamiliselt lisatava stiililehe kaudu, seejärel kopeeri kogu @keyframes-plokk koos .animated-element { animation: ... } lühikirjeldusega otse oma projekti. Nagu kõik selle saidi tööriistad, töötab ka see täielikult brauseris, midagi ei laadita kunagi üles.