Stylie - Un generatore di animazioni web gratuito per CSS
Se hai problemi con la sintassi CSS3 e vuoi un modo semplice per creare animazioni stylie è un ottimo strumento per salvare.
Questo è uno dei tanti gratuiti generatori di codice con particolare attenzione agli effetti animati CSS puri. Stylie è completamente gratuito e open-source, ospitato su GitHub e alimentato da una libreria di fotogrammi chiave denominata Rekapi.
La biblioteca di Rekapi usa JavaScript, quindi è un'alternativa al puro CSS. E per fortuna, l'app web Stylie supporta entrambi i metodi, quindi è possibile esportare il codice in puro CSS o JavaScript.
Per impostazione predefinita, la prima pagina carica una demo di animazione continua con un'animazione lineare. Puoi giocare con questo modificando il impostazioni predefinite nel Scheda Motion o modificando il Scheda Keyframes.
Nell'elenco dei keyframes, puoi aggiungi nuovi fotogrammi chiave, modifica la loro durata totale, e cambia gli stili di animazione, inclusi i movimenti basati sull'asse X / Y.
In primo luogo, questo sembrerà estremamente confuso, soprattutto se non hai mai fatto animazione con fotogrammi chiave prima. Tuttavia, più giochi con questa applicazione più ha senso.
Per impostazione predefinita, avrai un sacco di diverse opzioni di allentamento fare confusione e sono tutti super facili da personalizzare.
Il Grafico del movimento è molto più difficile da imparare ma ti dà un maggiore controllo sull'allentamento delle animazioni. Stylie ti lascia anche salva effetti di movimento personalizzati e riutilizzare questi nella scheda Keyframes per altre animazioni.
Se potessi lamentarmi di una cosa è l'app web mancanza di progettazione reattiva.
Non riuscivo a far rientrare l'intera app sul mio schermo MacBook Pro da 13 "anche con il browser completamente ingrandito, che può essere un problema poiché la pagina non ha una barra di scorrimento verticale e molte delle opzioni (come il codice esportato) sono trovate inferiore nel riquadro delle impostazioni.
Ma a parte questo fastidio minore, ho funzionato bene sul mio monitor più grande. E il qualità dell'esportazione è come nient'altro che troverai sul web.
Dai un'occhiata all'app Stylie per vedere come funziona e prova a giocherellare con alcune delle opzioni. Una volta creata l'animazione, puoi esportare il CSS o il JavaScript e usalo per ogni progetto che ti piace.
Se hai problemi ad apprendere l'interfaccia, puoi anche guardare questo breve tutorial che dura circa 9 minuti e copre tutte le principali funzionalità.
