Pause & Loop CSS-animaatiot odottamalla! elävöittää
On paljon, mitä voit tehdä puhtaan CSS-animaation kanssa, mutta animaation keskeyttäminen ja silmukointi ei ole mahdollista nykyisellä W3-spesifillä.
Mutta vapaa työkalu ODOTA! elävöittää voit itse luo silmukoituja animaatioita tyhjästä kanssa mukautettuja viiveitä kunkin silmukan välillä. Tämä saattaa tuntua arkipäiväisestä tehtävästä, mutta se ratkaisee kipupisteen monille kehittäjille.
On huomattava, että CSS-ominaisuutta kutsutaan animaatio-viive joka viivästyttää alkaa CSS-animaatiota. Kuitenkin se ei vaikuta toistuvaan animaatioon koska se vain viivästyttää lähtökohtaa.
ODOTA! elävöittää automaattinen laskee kuinka monta taukoa on asetettava mukautetun animaation avainruutuihin luo tarkka tauko tarvitset silmukoiden välillä. Tämä voitaisiin tehdä käsin, mutta se on äärimmäisen koettu, puhumattakaan erittäin ärsyttävästä.
Tämä web-sovellus voi työskentele minkä tahansa CSS3-animaatiotoiminnon kanssa, mukaan lukien pyöritykset ja muunnokset. Et kirjoittaa uusia CSS-ominaisuuksia vaan pikemminkin rakennus avainrakenteiden päälle luoda keskeyttää prosenttiosuudet (0% - 100%) animaation sisällä.
Katso kotisivulta nähdäksesi muutamia esimerkkejä toiminnasta. Se on melko selvää, mitä voit tehdä, ja lähdekoodi on oikeassa, jos haluat kopioida / liittää omaan työhösi.
Huomaa, että tämä on ei täysimittainen kirjasto. Se on generaattori luo CSS-koodisi lennossa joka perustuu animaatioviiveeseen.
Jos et halua yksinkertaisempaa ratkaisua paikan päällä, voit lataa Sass-sekoitus. Tämä on hieman hankalampaa, koska se vaatii Sass-kartan, joten sinun on ymmärrettävä, miten voit lisätä mukautettuja ominaisuuksia ja kirjoittaa syntaksi oikein.
Tässä on esimerkki siitä, miten voit soita sekoitus:
@include waitAnimate ((animaatioNimi: animName, avainkehykset: (0: (muunnos: asteikko (1), taustaväri: sininen), 50: (muunnos: asteikko (2), taustaväri: vihreä), 100: (muunnos : asteikko (3), taustaväri: punainen)), kesto: 2, odotusaika: 1, ajoitusFunktio: helppous, iterointiKoko: ääretön));
Pro-web-kehittäjillä ei pitäisi olla ongelmia oppia köysiä ja rakentaa sitä uudelleenkäytettäväksi sekoitukseksi. Mutta aloittelevat kehittäjät saattavat olla vaikeita saada se toimimaan, joten web-sovellus.
Kaikki tämä lähdekoodi on saatavilla ilmaiseksi GitHubissa jos haluat ladata kopion paikallisesti. Mutta koska tämä on niin outo ominaisuus, se ei ole jotain mitä tarvitset monissa projekteissa. Siksi WAIT! Animoi web-sovelluksen pitäisi olla enemmän kuin tarpeeksi auttaa sinua ratkaise kertaluonteinen ongelma of viivästetty silmukoitu animaatio puhtaalla CSS: llä.
Se on todella hauska häkki, joka on myös melko epäselvä. Mutta se osoittaa, kuinka paljon on mahdollista CSS3: n ja hieman kekseliäisyyden kanssa.
