Pauziraj i skini CSS animacije pomoću WAIT! Animirati
Mnogo toga možete učiniti s čistom CSS animacijom, ali pauziranje i petljanje animacije nije moguće s trenutnom specifikacijom W3.
Ali s besplatnim alatom ČEKATI! Animirati možete zapravo stvorite animacije u obliku petlje od nule s prilagođena kašnjenja između svake petlje. To se može činiti kao svakodnevni zadatak, ali rješava bolnu točku za mnoge programere.
Treba napomenuti da se zove CSS svojstvo animacija kašnjenja koji odgađa početak CSS animacije. Kako god bilo ne utječe na ponavljajuću animaciju jer samo odgađa polaznu točku.
ČEKATI! Animirati auto-izračunava koliko pauze treba postaviti unutar prilagođenih ključnih kadrova animacije stvoriti točno trajanje pauze trebate između petlji. To se može obaviti ručno, ali je iznimno zamršeno, da ne spominjemo super neugodno.
Ova web-aplikacija može rad s bilo kojom značajkom animacije CSS3, uključujući rotacije i transformacije. Ne pišete nove CSS svojstva, nego zgrada na vrhu značajke ključnih kadrova stvoriti pauze temeljene na postocima (od 0% do 100%) unutar animacije.
Pogledajte početnu stranicu da biste je vidjeli nekoliko primjera u akciji. Prilično je jasno što možete učiniti i izvorni kod je tu da biste kopirali / zalijepili u svoj rad.
Imajte na umu da je ovo nije potpuno razvijena knjižnica. To je generator kreira vaš CSS kod on-the-fly na temelju svega što vam je potrebno za kašnjenje animacije.
Ako želite jednostavnije rješenje izvan mjesta onda možete preuzmite Sass mixin. Ovo je malo teže jer zahtijeva Sass kartu, tako ćete morati razumjeti kako dodati prilagođena svojstva i ispravno napisati sintaksu.
Evo primjera kako biste nazovite mixin:
@ Include waitAnimate ((animationName: animName, ključni okviri: (0: (transformacija: ljestvica (1), boja pozadine: plava), 50: (transformacija: ljestvica (2), boja pozadine: zelena), 100: (transformacija : ljestvica (3), pozadinska boja: crvena)), trajanje: 2, vrijeme čekanja: 1, timingFunction: jednostavnost, iterationCount: beskonačno));
Pro web programeri ne bi smjeli imati problema u učenju užeta i izgradnji u višekratnu kombinaciju. No, početnici programeri svibanj borba da biste dobili Internet funkcioniranje, stoga web app.
Sve ovo izvorni kod dostupan je besplatno na GitHubu ako želite kopiju kopirati lokalno. Ali budući da je ovo tako čudna značajka, to nije nešto što će vam vjerojatno trebati u mnogim projektima. Zato WAIT! Animacija web-aplikacije trebala bi biti više nego dovoljna da vam pomogne riješiti jednokratni problem od odgađanje animacija u obliku petlje s čistim CSS-om.
To je stvarno zabavan hack koji je također prilično nejasan po dizajnu. Ali to pokazuje koliko je moguće s CSS3 i malo genijalnosti.
