Pause & Loop CSS animācijas ar WAIT! Animēt

Ir daudz, ko var darīt ar tīru CSS animāciju, bet animācija nav iespējama ar pašreizējo W3 spec.

Bet, piemēram, ar bezmaksas rīku Gaida! Animēt jūs faktiski varat izveidot nulles animācijas no nulles ar pielāgotus kavējumus starp katru cilpu. Tas var šķist ikdienišķs uzdevums, bet tas atrisina sāpju punktu daudziem izstrādātājiem.

Jāatzīmē, ka tiek izsaukts CSS īpašums animācijas aizture kas aizkavē sākt CSS animāciju. Tomēr tā neietekmē atkārtotu animāciju jo tas aizkavē tikai sākuma punktu.

Gaida! Animēt automātiski aprēķina cik pauzes ir jāievieto pielāgoto animācijas atslēgas rāmju iekšpusē izveidojiet precīzu pauzes ilgumu jums ir vajadzīgas starp cilpām. To var izdarīt ar rokām, bet tas ir ļoti pārliecināts, nemaz nerunājot par super kaitinošu.

Šī tīmekļa lietotne var strādāt ar jebkuru CSS3 animācijas funkciju, ieskaitot rotācijas un pārveidojumus. Jūs nerakstāt nekādas jaunas CSS īpašības, bet drīzāk ēka uz galvenās karkasu funkcijas radīt pauzes, pamatojoties uz procentiem (no 0% līdz 100%) animācijas iekšpusē.

Apskatiet mājas lapu, lai redzētu daži piemēri darbībā. Tas ir diezgan skaidrs, ko jūs varat darīt, un avota kods ir tieši tur, lai kopētu / ielīmētu savā darbā.

Lūdzu, ņemiet vērā, ka tas ir nav pilntiesīga bibliotēka. Tas ir ģenerators izveido CSS kodu lidojuma laikā pamatojoties uz to, kas jums nepieciešams animācijas aizkavēšanai.

Ja jūs vēlaties vienkāršāku risinājumu ārpus vietnes, tad varat lejupielādējiet Sass mixin. Tas ir nedaudz sarežģītāks, jo tam nepieciešama Sass karte, tāpēc jums būs jāsaprot, kā pievienot pielāgotas īpašības un pareizi uzrakstīt savu sintaksi.

Šeit ir piemērs, kā jūs izsauciet maisījumu:

 @include waitAnimate ((animācijas nosaukums: animName, atslēgas rāmji: (0: (pārveidot: skala (1), fona krāsa: zila), 50: (pārveidot: skala (2), fona krāsa: zaļa), 100: (pārveidot : skala (3), fona krāsa: sarkana)), ilgums: 2, waitTime: 1, timingFunction: vieglums, iterācijaCount: infinite)); 

Pro tīmekļa izstrādātājiem nevajadzētu būt nekādu problēmu, mācot virves un veidojot to atkārtoti izmantojamā maisījumā. Bet iesācēju izstrādātāji var cīnīties, lai saņemtu to, tāpēc tīmekļa lietotne.

Viss šis avota kods ir pieejams bez maksas GitHub ja vēlaties lejupielādēt kopiju lokāli. Bet tā kā šī ir tik dīvaina iezīme, tas nav kaut kas, kas jums, iespējams, būs vajadzīgs daudzos projektos. Tāpēc WAIT! Anime tīmekļa lietotnei vajadzētu būt vairāk nekā pietiekami, lai palīdzētu jums atrisināt vienreizēju problēmu no aizkavēt cilpas animācijas ar tīru CSS.

Tas ir patiešām jautri kapāt, kas arī ir diezgan neskaidrs. Taču tas parāda, cik daudz ir iespējams ar CSS3 un mazliet atjautību.