CSS-i võtmekaadri animatsiooni generaator

CSS-i @keyframes-reegel on tegelikult väike ajaskaala: protsentuaalsete kontrollpunktide kogum, millest igaüks deklareerib, milline peaks atribuut sel hetkel välja nägema, kusjuures brauser interpoleerib kõik vahepealsed. Ühe käsitsi ehitamine tähendab mitme sellise protsentuaalse kontrollpunkti hoidmist oma peas korraga mitmel kinnistul – see generaator muudab selle ajaskaala millekski, mida saate tegelikult näha ja lohistada: üks horisontaalne rada kinnistu kohta koos peatusmärgiga igas kontrollpunktis.

Keskne osa on puhastuspea. Lohistage see suvalisse punkti vahemikus 0% kuni 100% ja eelvaatekast hüppab sel hetkel täpsesse kombineeritud olekusse – mitte lähima võtmekaadri juurde, vaid tegelikule lineaarselt interpoleeritud väärtusele, mis arvutatakse iga aktiivse raja esituspead ümbritseva kahe peatuse vahel. Numbrilised omadused, nagu asend, pöörlemine ja skaala, interpoleeruvad tavaliste numbritena; background-color interpoleerib igat punast, rohelist ja sinist kanalit eraldi, mistõttu värvirada tuhmub sujuvalt läbi vahepealsete toonide, mitte ei hüppa tegelikult seatud värvide vahel.

Mitu rada liidetakse automaatselt üheks sidusaks animatsiooniks: iga teisenduspõhine atribuut (teisaldamine, pööramine, skaleerimine) liidetakse iga võtmekaadri protsendi juures üheks teisendusdeklaratsiooniks, samas kui läbipaistmatus ja taustavärv jäävad oma ridadele, täpselt nii, nagu tõeline käsitsi kirjutatud CSS välja näeks. Protsendid, mille puhul antud rajal puudub selgesõnaline peatus, jäetakse selle atribuudi deklaratsioonidest lihtsalt meelega välja – brauseri enda võtmekaadri interpolatsioon täidab olemasolevate peatuste vahelise tühimiku samamoodi nagu mis tahes @keyframes reegli puhul, mille käsitsi sisestasite.

Viis eelseadistust – põrkamine, raputamine, pulss, tuhmumine ja sisselibisemine – laadivad ühe klõpsuga täieliku kohandamisvalmis ajaskaala (sh mõistlik kestus, ajastusfunktsioon ja korduste arv). Klõpsake igal hetkel nuppu Esita, et näha tõelist CSS-animatsiooni, mis käitatakse eelvaateelemendil, mis genereeritakse käigult dünaamiliselt sisestatud stiilitabeli kaudu, seejärel kopeerige kogu @keyframes plokk ja .animated-element { animation: ... } stenogramm otse oma projekti. Nagu kõik sellel saidil olevad tööriistad, töötab see kõik brauseris lokaalselt ja midagi pole kunagi üles laaditud.