Pause & Loop CSS animatsioonid WAIT'iga! Animeeri

Puhta CSS-animatsiooniga saab palju teha, aga animatsiooni peatamine ja silumine ei ole võimalik praeguse W3-spetsifikatsiooniga.

Kuid vaba tööriistaga Oota! Animeeri saate tegelikult luua nullist animeeritud pilte koos kohandatud viivitused iga silmuse vahel. See võib tunduda igapäevane ülesanne, kuid see lahendab paljude arendajate jaoks valupunkti.

Tuleb märkida, et on olemas CSS-i omadus animatsiooni viivitus mis viivitab alustada CSS-animatsiooni. Kuid see ei mõjuta korduvat animatsiooni kuna see viivitab vaid lähtepunkti.

Oota! Animeeri arvutab automaatselt mitu pausi tuleb paigutada kohandatud animatsiooniklahvidesse looge täpne pausi kestus peate silmuste vahel. Seda saab teha käsitsi, kuid see on äärmiselt keeruline, rääkimata ülimalt tüütuid.

See veebirakendus saab töötage mis tahes CSS3 animatsioonifunktsiooniga, sealhulgas pöörded ja muundamised. Te ei kirjuta ühtegi uut CSS-i omadust, vaid pigem hoone võtme raamide funktsiooni peal looma peatub protsentides (0% kuni 100%) animatsiooni sees.

Vaadake kodulehekülge, et näha mõned näited tegevuses. See on päris selge, mida saate teha ja lähtekood on seal oma töös kopeerimiseks / kleepimiseks.

Pange tähele, et see on mitte täieõiguslik raamatukogu. See on generaator loob teie CSS-koodi lennult mis põhineb animatsiooni viivituseks.

Kui sa tahad väljapoole lihtsamat lahendust, siis saate seda teha lae Sass mixin. See on natuke keerulisem see nõuab Sassi kaarti, seega peate mõistma, kuidas lisada kohandatud omadusi ja kirjutada oma süntaks õigesti.

Siin on näide sellest, kuidas soovite helistage segamini:

 @include waitAnimate ((animatsioonNimi: animName, võtmefailid: (0: (transform: skaala (1), taustavärv: sinine), 50: (teisendama: skaala (2), taustavärv: roheline), 100: (teisendama : skaala (3), taustavärv: punane)), kestus: 2, waitTime: 1, ajastusfunktsioon: lihtne, iteratsioonCount: infinite)); 

Pro veebiarendajatel ei tohiks olla mingit probleemi köite õppimisel ja selle korduvkasutatavaks segamiseks. Aga algajad arendajad võivad vaeva saada, et see toimiks, seega veebirakendus.

Kõik see lähtekood on saadaval tasuta GitHubis kui soovite alla laadida koopia kohapeal. Aga kuna see on selline kummaline funktsioon, pole see midagi, mida te ilmselt vajate paljudes projektides. Sellepärast WAIT! Animeerida veebirakendus peaks teid rohkem aitama lahendada ühekordne probleem of viivitusega animeeringute edasilükkamine puhta CSS-iga.

See on tõesti lõbus häkk, mis on ka disaini tõttu üsna ebaselge. Kuid see näitab, kui palju on võimalik CSS3 ja veidi leidlik.