CSS-avainkehysanimaatiogeneraattori

CSS @keyframes -sääntö on todella pieni aikajana: joukko prosenttitarkistuspisteitä, joista jokainen ilmoittaa, miltä kiinteistön pitäisi näyttää juuri sillä hetkellä, ja selain interpoloi kaiken siltä väliltä. Yhden käsin rakentaminen tarkoittaa, että pidät useita näistä prosenttitarkistuspisteistä mielessäsi kerralla useissa kiinteistöissä – tämä generaattori muuttaa aikajanan sellaiseksi, jota voit todella nähdä ja vetää: yksi vaakasuora kaista kiinteistöä kohden, jossa on pysäytysmerkki jokaisessa tarkistuspisteessä.

Keskipiste on hankauspää. Vedä se mihin tahansa kohtaan välillä 0 % ja 100 %, ja esikatseluruutu siirtyy tarkalleen yhdistettyyn tilaan sillä hetkellä – ei lähimpään avainruutuun, vaan todelliseen lineaarisesti interpoloituun arvoon, joka lasketaan jokaisen aktiivisen raidan toistopaikkaa ympäröivän kahden pisteen välillä. Numeeriset ominaisuudet, kuten sijainti, kierto ja mittakaava interpoloituvat tavallisina numeroina; background-color interpoloi jokaisen punaisen, vihreän ja sinisen kanavan itsenäisesti, mikä saa väriraidan häivyttämään tasaisesti välisävyjen kautta sen sijaan, että se hyppää itse asettami värien välillä.

Useat raidat yhdistyvät automaattisesti yhdeksi yhtenäiseksi animaatioksi: jokainen muunnospohjainen ominaisuus (siirrä, kierrä, skaalautuu) sulautuu yhdeksi muunnosilmoitukseksi jokaisella avainkehysprosentilla, kun taas peittävyys ja taustaväri pysyvät omilla linjoillaan, aivan kuten oikea käsinkirjoitettu CSS näyttäisi. Prosenttiosuudet, joissa tietyllä raidalla ei ole nimenomaista pysähdystä, jätetään tarkoituksella pois kyseisen ominaisuuden ilmoituksista – selaimen oma avainkehysinterpolointi täyttää olemassa olevien pysähdysten välisen aukon, samalla tavalla kuin mitä tahansa käsin kirjoittamaasi @keyframes-sääntöä käytettäessä.

Viisi esiasetusta – pomppiminen, tärinä, pulssi, häivytys ja liukuminen – lataa täydellisen, muokattavan aikajanan (mukaan lukien järkevä kesto, ajoitustoiminto ja toistojen määrä) yhdellä napsautuksella. Napsauta Toista missä tahansa vaiheessa nähdäksesi todellisen CSS-animoinnin suoritettavan esikatseluelementissä, joka on luotu lennossa dynaamisesti lisätyn tyylitaulukon kautta, ja kopioi sitten koko @keyframes-lohko sekä .animated-element { animation: ... } lyhenne suoraan omaan projektiisi. Kuten kaikki tämän sivuston työkalut, se kaikki toimii paikallisesti selaimessa eikä mitään ole ladattu.