Pauza a slučka CSS animácie s WAIT! oživiť

Je tu veľa, čo môžete robiť s čistou CSS animáciou, ale pozastavenie a prekladanie animácie nie je možné s aktuálnou špecifikáciou W3.

Ale s bezplatným nástrojom, ako je PROSÍM! oživiť môžete skutočne vytvorte animované cykly od nuly s vlastné oneskorenia medzi každou slučkou. To sa môže zdať ako svetská úloha, ale pre mnohých vývojárov to rieši bod bolesti.

Treba poznamenať, že existuje vlastnosť CSS nazvaná animácie-delay ktorý oneskorenie štart animácie CSS. Avšak neovplyvňuje opakovanú animáciu pretože len oneskoruje začiatočný bod.

PROSÍM! oživiť auto-vypočítava koľko prestávok je potrebné umiestniť do vlastných animačných kľúčových snímok Vytvorte presné trvanie pauzy potrebujete medzi slučkami. To sa dá robiť ručne, ale je to extrémne konvolvované, nehovoriac o super otravu.

Táto webová aplikácia môže pracovať s ľubovoľnou funkciou animácie CSS3, vrátane rotácií a transformácií. Nevypisujete žiadne nové vlastnosti služby CSS, ale skôr ktoré sú postavené na vrchole funkcie kľúčových snímok vytvoriť prestávky na základe percenta (od 0% do 100%) vo vnútri animácie.

Pozrite sa na domovskú stránku, ktorú chcete vidieť niekoľko príkladov v akcii. Je úplne jasné, čo môžete urobiť a zdrojový kód je tam priamo na kopírovanie / vloženie do vlastnej práce.

Upozorňujeme, že toto je nie je plnohodnotná knižnica. Je to generátor, ktorý vytvára váš kód CSS na cestách založené na tom, čo potrebujete na oneskorenie animácie.

Ak chcete jednoduchšie riešenie mimo miesta, potom môžete stiahnite si Sass mixin. Je to o niečo oveľa zložitejšie, pretože vyžaduje si mapu Sass, takže budete musieť pochopiť, ako pridať vlastné vlastnosti a napísať správne syntax.

Tu je príklad toho, ako ste zavolajte mixin:

 @: includeAnimate ((animationName: animName, kľúčové snímky: (0: (premenná: stupnica 1, farba pozadia: modrá), 50: : stupnica (3), farba pozadia: červená)), trvanie: 2, čakacia doba: 1, časovanie Funkcia: jednoduchosť, iteráciaCount: nekonečná)); 

Pro vývojári webu by nemali mať problém učiť sa laná a stavať ich na opakovane použiteľný mixin. Ale nováčikoví vývojári môžu bojovať o to, aby fungovali, a teda aj webovú aplikáciu.

Toto všetko zdrojový kód je k dispozícii zdarma na GitHub ak chcete kopírovať lokálne. Ale pretože je to taká zvláštna vlastnosť, nie je to niečo, čo budete pravdepodobne potrebovať v mnohých projektoch. Preto čakajte! Animované webové aplikácie by mali byť viac než dosť, aby vám pomohli vyriešiť jednorazový problém z oneskorenie animovaných cyklov pomocou čistého CSS.

Je to naozaj zábavný hack, ktorý je tiež dosť nejasný. Ale to ukazuje, koľko je možné s CSS3 a trochu vynaliezavosťou.