Začasno ustavi in skrij animacije CSS z WAIT! Animirajte
Obstaja veliko, kar lahko storite s čisto CSS animacijo, vendar Začasna ustavitev animacije ni možna s trenutnimi specifikacijami W3.
Toda z brezplačnim orodjem ČEKAJ! Animirajte lahko dejansko ustvarite animacije z zanko iz nič z zamude po meri med vsako zanko. To se morda zdi svetovna naloga, vendar rešuje bolečo točko za mnoge razvijalce.
Treba je opozoriti, da se imenuje lastnost CSS zakasnitev animacije ki zamude začetek CSS animacije. Vendar pa je ne vpliva na ponavljajočo se animacijo saj le zamuja z začetno točko.
ČEKAJ! Animirajte samodejno izračuna koliko pavz je treba namestiti znotraj prilagojenih animacijskih ključev ustvarite natančno trajanje premora potrebujete med zankami. To je mogoče narediti ročno, vendar je zelo zapleteno, da ne omenjam super nadležno.
Ta spletna aplikacija lahko delo z vsako funkcijo animacije CSS3, vključno z rotacijami in transformacijami. Ne pišete novih lastnosti CSS, ampak na vrhu funkcije ključnih slik ustvariti premori, ki temeljijo na odstotkih (od 0% do 100%) znotraj animacije.
Oglejte si domačo stran, ki jo želite videti nekaj primerov v akciji. To je precej jasno, kaj lahko storite in izvorna koda je tam, da kopirate / prilepite v svoje delo.
Upoštevajte, da je to ne popolna knjižnica. To je generator ustvarja kodo CSS on-the-fly glede na vse, kar potrebujete za zakasnitev animacije.
Če želite preprostejšo rešitev zunaj mesta, potem lahko prenesite Sass mixin. To je malo težje, ker zahteva Sass zemljevid, tako boste morali razumeti, kako dodati lastnosti po meri in pravilno napisati skladnjo.
Tukaj je primer, kako bi pokličite mixin:
@include waitAnimate ((animationName: animName, ključni okvirji: (0: (transformacija: lestvica (1), barva ozadja: modra), 50: (transformacija: lestvica (2), barva ozadja: zelena), 100: (pretvorba : lestvica (3), barva ozadja: rdeča)), trajanje: 2, čakalni čas: 1, časovna funkcija: enostavnost, iterationCount: infinite));
Pro spletni razvijalci ne bi smeli imeti težav pri učenju vrvi in gradnji v mešanici za večkratno uporabo. Ampak novice razvijalci lahko borijo, da bi dobili to delo, zato spletna aplikacija.
Vse to izvorno kodo je na voljo brezplačno na GitHub če želite kopijo prenesti lokalno. Ker pa je to tako nenavadno značilnost, to ni nekaj, kar boste verjetno potrebovali pri številnih projektih. Zato WAIT! Animacija spletne aplikacije mora biti več kot dovolj, da vam pomaga rešiti enkratni problem od zakasnitev zanka z animacijo s čistim CSS.
To je res zabavno kramp, ki je tudi precej nejasna z zasnovo. Ampak to kaže na to, koliko je mogoče s CSS3 in malo iznajdljivosti.
