Stylie - ilmainen CSS-verkko-animaatiorakentaja

Jos kamppailet CSS3-syntaksin kanssa ja haluat a yksinkertainen tapa luoda animaatioita Stylie on hyvä työkalu tallentamiseen.

Tämä on yksi monista vapaista koodigeneraattorit keskitytään puhtaisiin CSS-animaatioefekteihin. Stylie on täysin ilmainen ja avoin, GitHubin ylläpitämä ja avainrunkokirjasto nimeltä Rekapi..

Rekapi-kirjasto käyttää JavaScriptiä, joten se on vaihtoehto puhtaalle CSS: lle. Ja onneksi Stylie-web-sovellus tukee molempia menetelmiä, joten voit vientikoodi joko puhtaassa CSS: ssä tai JavaScriptissä.

Oletusarvoisesti ensimmäinen sivu lataa jatkuvan animaatioesityksen, jossa on lineaarinen animaatio. Voit pelata tätä muokkaamalla oletusasetukset vuonna Liike-välilehti tai muokkaamalla Keyframes-välilehti.

Avainkehysten luettelossa voit lisää uusia avainruutuja, muokkaa niiden kokonaiskestoa, ja muuttaa animaatiotyylejä, mukaan lukien X / Y-akseliin perustuvat liikkeet.

Ensinnäkin tämä näyttää erittäin sekava, varsinkin jos et ole koskaan tehnyt avainruudun animaatiota. Mitä enemmän pelaat tällä sovelluksella, sitä enemmän se on järkevää.

Oletuksena on tonnia eri helpotusvaihtoehtoja voit sotkea ja ne ovat erittäin helposti muokattavissa.

Liikkeen kaavio on paljon vaikeampi oppia, mutta se antaa sinulle paljon enemmän valvontaa animaation helpottamisesta. Stylie jopa antaa sinulle tallenna mukautettuja liiketehosteita ja käyttää niitä uudelleen muiden animaatioiden Keyframes-välilehdessä.

Jos voisin valittaa yhdestä asiasta, se on web-sovelluksen puutteellinen reagoiva suunnittelu.

En voinut saada koko sovellusta mahtumaan 13 "MacBook Pro -näytölle, vaikka selain olisi täysin maksimoinut. Tämä voi olla ongelma, koska sivulla ei ole pystysuoraa vierityspalkkia ja monet vaihtoehdot (kuten viety koodi) löytyvät pienempi asetusten ruudussa.

Mutta tämän pienen ärsytyksen ohella sain sen toimimaan hienosti suuremmalla näytöllä. Ja viennin laatu on kuin mikään muu, mitä löydät verkossa.

Tutustu Stylie-sovellukseen nähdäksesi, miten se toimii ja yritä hämmentää joitakin vaihtoehtoja. Kun teet animaation, voit viedä CSS tai JavaScript ja käytä sitä mihin tahansa haluamaasi projektiin.

Jos sinulla on vaikeuksia oppia käyttöliittymää, voit katsella tätä lyhyttä opetusta, joka kattaa noin 9 minuuttia ja joka kattaa kaikki tärkeimmät ominaisuudet.