Metti in pausa e apri le animazioni CSS con WAIT! Animare
C'è molto che puoi fare con la pura animazione CSS, ma non è possibile mettere in pausa e ripetere un'animazione con l'attuale specifica W3.
Ma con uno strumento gratuito come ASPETTARE! Animare puoi effettivamente crea animazioni loop da zero con ritardi personalizzati tra ogni ciclo. Questo può sembrare un compito banale, ma risolve un punto dolente per molti sviluppatori.
Va notato che esiste una proprietà CSS chiamata animazione ritardo quale ritarda il inizio di un'animazione CSS. Comunque non influisce su un'animazione ricorrente come ritarda solo il punto di partenza.
ASPETTARE! Animare auto-calcola quante pause devono essere posizionate all'interno dei fotogrammi chiave di animazione personalizzati su crea la durata esatta della pausa hai bisogno tra i loop. Questo potrebbe essere fatto a mano ma è estremamente convoluto, per non dire super fastidioso.
Questa app Web può funziona con qualsiasi funzione di animazione CSS3, comprese rotazioni e trasformazioni. Non stai scrivendo nuove proprietà CSS, ma piuttosto costruendo in cima alla caratteristica dei keyframe creare pause in base alle percentuali (dallo 0% al 100%) all'interno dell'animazione.
Controlla la pagina iniziale per vedere alcuni esempi in azione. È abbastanza chiaro cosa puoi fare e il codice sorgente è lì per copiare / incollare nel tuo lavoro.
Si prega di notare questo è non una libreria a tutti gli effetti. È un generatore crea il tuo codice CSS al volo basato su qualsiasi cosa tu abbia bisogno per il ritardo dell'animazione.
Se vuoi una soluzione più semplice fuori sede, allora puoi farlo scarica il mixin di Sass. Questo è un po 'più complicato perché richiede una mappa Sass, quindi dovrai capire come aggiungere proprietà personalizzate e scrivere correttamente la tua sintassi.
Ecco un esempio di come faresti chiama il mixin:
@include waitAnimate ((animationName: animName, keyframes: (0: (transform: scale (1), background-color: blue), 50: (transform: scale (2), background-color: green), 100: (transform : scale (3), background-color: red)), durata: 2, waitTime: 1, timingFunction: ease, iterationCount: infinito));
Gli sviluppatori web Pro non dovrebbero avere problemi nell'apprendere le corde e costruirle in un mixin riutilizzabile. Ma gli sviluppatori alle prime armi potrebbero avere difficoltà a farlo funzionare, da qui l'app web.
Tutto questo codice sorgente è disponibile gratuitamente su GitHub se vuoi scaricare una copia localmente. Ma dal momento che questa è una caratteristica così strana, non è qualcosa di cui probabilmente avrai bisogno in molti progetti. Ecco perché WAIT! L'applicazione web animata dovrebbe essere più che sufficiente per aiutarti risolvere un problema una tantum di ritardare le animazioni in loop con puro CSS.
È un trucco davvero divertente che è anche piuttosto oscuro dal design. Ma va a dimostrare quanto è possibile con CSS3 e un po 'di ingegno.
