Pauză și buclă CSS Animații cu WAIT! Anima

Există multe lucruri pe care le poți face cu animația pur CSS, dar întreruperea și looparea unei animații nu este posibilă cu actuala spec. W3.

Dar cu un instrument gratuit ca AȘTEPTA! Anima puteți de fapt creați animații în buclă de la zero cu întârzieri personalizate între fiecare buclă. Acest lucru poate părea o sarcină mundane, dar rezolvă un punct de durere pentru mulți dezvoltatori.

Trebuie remarcat faptul că există o proprietate CSS numită animație întârziere care întârzie start de animație CSS. Cu toate acestea nu afectează o animație repetată deoarece întârzie doar începutul.

AȘTEPTA! Anima auto-calculează câte pauze trebuie plasate în cadrul cheie de animație personalizat creați durata exactă a pauzei ai nevoie de bucle. Acest lucru se poate face manual, dar este extrem de convolved, ca să nu mai vorbim de super-enervant.

Această aplicație web poate lucrați cu orice caracteristică de animație CSS3, inclusiv rotații și transformări. Nu scrieți nicio proprietate CSS nouă, ci mai degrabă construind pe partea de sus a caracteristicilor cadrelor cheie a crea pauze pe baza procentelor (de la 0% la 100%) în interiorul animației.

Verificați pagina de pornire pentru a vedea câteva exemple în acțiune. Este destul de clar ce puteți face și codul sursă este chiar acolo pentru a copia / lipi în propria dvs. lucrare.

Vă rugăm să rețineți că aceasta este nu o bibliotecă deplină. E un generator care creează codul CSS pe loc bazat pe tot ce ai nevoie pentru întârzierea animației.

Dacă doriți o soluție mai simplă în afara amplasamentului atunci puteți descarcă mixerul Sass. Acest lucru este un pic mai complicat pentru că necesită o hartă a lui Sass, astfel că va trebui să înțelegeți cum să adăugați proprietăți personalizate și să scrieți corect sintaxa.

Iată un exemplu despre modul în care ați procedat sunați la mixin:

 @include waitAnimate ((animațieName: animName, cadre cheie: (0: (transform: scală (1), fundal-culoare: albastru) 50: : scara (3), culoarea de fundal: roșu)), durata: 2, waitTime: 1, timingFunction: ease, iterationCount: infinit)); 

Pro dezvoltatorii web nu ar trebui să aibă nici o problemă în învățarea cablurilor și construirea acestora într-un mixin reutilizabil. Dar dezvoltatorii novici se pot lupta pentru a face să funcționeze, prin urmare, aplicația web.

Toate acestea cod sursa este disponibil gratuit pe GitHub dacă doriți să descărcați o copie la nivel local. Dar, deoarece aceasta este o trăsătură atât de ciudată, nu este ceva ce probabil veți avea nevoie în multe proiecte. De aceea, WAIT! Animați aplicația web ar trebui să fie mai mult decât suficient pentru a vă ajuta rezolvați o problemă unică de amânarea animațiilor în buclă cu CSS pur.

Este un hack foarte distractiv, de asemenea, destul de obscur prin design. Dar se arată cât de mult este posibil cu CSS3 și puțină ingeniozitate.