Crea fantastiche animazioni CSS facilmente con Animista

Ci sono tonnellate di applicazioni web di animazione CSS online. Ma pochissimi sono paragonabili al livello di dettaglio e alla facilità d'uso che si ottiene Animista.

Questa app web gratuita ti permette generare animazioni CSS personalizzate con un clic di un pulsante. Puoi scegliere tra movimenti predefiniti come diapositive, trasformazioni, oscillazioni e persino animazioni di ombre.

Una volta creata l'animazione, puoi esporta il codice proprio come con altri generatori CSS. Tranne, questo codice è molto più facile da lavorare e persino viene fornito con uno strumento minificatore incorporato.

All'inizio l'interfaccia può sembrare confusa, ma solo a causa di quante opzioni hai!

Costruisci animazioni personalizzate seguendo tre passaggi principali e usando l'interfaccia da cima a fondo:

1. Scegli uno stile di movimento (swing, slide, flip-scale) dai cerchi in alto
2. Personalizzalo con diversi tipi di movimento sotto
3. Modifica le opzioni di animazione nella barra delle opzioni sul lato sinistro mobile

Attraverso questo processo, puoi modificare la durata totale dell'animazione, lo stile di andamento, il ritardo, praticamente tutto. E tutto funziona tramite puro CSS3, che lo rende ancora più impressionante.

Inoltre, nella barra di navigazione superiore puoi persino scegliere tra diversi tipi di stili di destinazione di animazione.

Il l'impostazione predefinita è “di base” che può funzionare praticamente su qualsiasi cosa (hover, click o animazione immediata). Altri obiettivi includono testo di pagina, animazioni di sfondo e persino animazioni di ingresso personalizzate per visualizzare un elemento di pagina nascosta.

Mi piace soprattutto il “Attenzione” link in alto che ha alcuni effetti frullati e jitter per gli stili dei pulsanti. Funzionano perfettamente con i pulsanti CTA per attirare l'attenzione e incoraggiare le interazioni dell'utente.

Una volta che hai finito di fare le regolazioni, semplicemente fai clic sull'icona della piccola parentesi nell'angolo superiore destro del riquadro di anteprima.

Questo porta una nuova pagina in vista con la tua intera classe di animazione CSS, insieme ai fotogrammi chiave. Funzionalità opzionali ti permettono di riduci il codice e include il prefisso automatico che supporta i browser Web meno recenti.

Ho usato tonnellate di strumenti di animazione CSS personalizzati e senza dubbio Animista è lo strumento più ricco di funzionalità là fuori. È totalmente gratuito e un po 'complesso all'inizio, ma una volta che hai capito l'interfaccia, è di gran lunga il miglior generatore che puoi usare.

Per fare un tentativo, basta visitare la homepage e fare clic “Prova mi”. Puoi anche condividere i tuoi pensieri e i complimenti con il creatore dell'app web @ ana108.