Animate.css è in circolazione da qualche anno e devo ammettere di essere in ritardo alla festa. L'ho scoperto solo un paio di mesi fa mentre cercavo in rete alcuni tutorial di animazione CSS e ho trovato quello che deve essere il modo più veloce e semplice per animare, Animate.css.
Creato da un ragazzo chiamato Dan Eden, Animate.css è un modo rapido per vedere come funziona CCS e ottenere alcune azioni di animazione sul tuo sito web.
Descritto come Animation.css "aggiungi solo acqua CSS" è un po 'divertente con un lato serio. Permette anche ai web designer dilettanti come me di fare rapidamente i conti con i fondamenti dell'animazione CSS e creare effetti semplici ma efficaci per i siti Web. Da un singolo titolo animato a movimenti più coinvolti, questo strumento può farlo.
Animate.css
Animate.css è disponibile per il download da GitHub ed è essenzialmente una libreria di semplici effetti CSS raccolti in un unico posto. Ogni animazione è ben confezionata e pronta per l'uso. Tutto quello che devi fare è trovare l'animazione che ti piace e applicare la classe. Questo è davvero tutto ciò che c'è da fare.
Non è necessario scaricare l'intera libreria se non si desidera in quanto contiene 2.500 righe di codice al suo interno. È possibile visitare il sito Animate.css, trovare un'animazione e fare clic sul collegamento Scarica Animate.css. Carica la classe su una pagina Web che puoi copiare e utilizzare come ritieni opportuno.
Tuttavia, è più facile usare GitHub e approfondire per trovare l'effetto che stai cercando.
- Passare alla pagina CSS GitHub.
- Fare clic sul collegamento Sorgente per accedere all'elenco di elementi.
- Seleziona il tipo di effetto che stai cercando dall'elenco. Bounce è un cercatore di attenzione, quindi seleziona il link attention_seekers.
- Seleziona bounce.css.
- Copia il codice e posizionalo sulla tua pagina per applicare l'animazione.
E 'davvero così semplice. Dovresti ovviamente selezionare diverse opzioni per i diversi effetti, ma il risultato finale è lo stesso. Accesso al codice necessario per eseguire il lavoro pesante sulla pagina.
Costruire un oggetto animato con Animate.css
Costruire qualcosa di interessante con Animate.css è semplice. Si tratta solo di trovare il codice CCS e aggiungerlo al proprio CSS. Se posso farlo, chiunque può!
La prima opzione nella pagina Animate.css è bounce, quindi usiamola in questo esempio.
- Incolla ' ' dentro nel tuo foglio di stile.
- Trova il CSS per l'animazione che desideri e aggiungilo all'elemento che desideri animare. Ad esempio, aggiungi " "per aggiungere quell'effetto di rimbalzo al test, un'immagine o altro.
- Aggiungi il seguente codice CSS per farlo funzionare. Tratto da bounce.css sopra.
@keyframes bounce {
da, 20%, 53%, 80%, a {
funzione di timing-animazione: cubic-bezier (0.215, 0.610, 0.355, 1.000);
trasforma: translate3d (0, 0, 0);
}
40%, 43% {
funzione di timing-animazione: cubic-bezier (0.755, 0.050, 0.855, 0.060);
trasforma: translate3d (0, -30px, 0);
}
70% {
funzione di timing-animazione: cubic-bezier (0.755, 0.050, 0.855, 0.060);
trasforma: translate3d (0, -15px, 0);
}
90% {
trasforma: translate3d (0, -4px, 0);
}
}
.bounce {
nome-animazione: rimbalzo;
origine-trasformazione: centro in basso;
}
Migliorare ulteriormente l'animazione con Animate.css
La sequenza precedente aggiunge un effetto di rimbalzo quando la pagina viene caricata per la prima volta, il che è bello ma una cosa sola. Che ne dici di aggiungerlo al passaggio del mouse. In questo modo, ogni volta che qualcuno supera il test, rimbalza. Non è qualcosa che farei su un sito Web di produzione, ma è un ottimo modo per dimostrare come funziona tutto.
Aggiungi il codice seguente al tuo CSS per aggiungere l'effetto di rimbalzo al passaggio del mouse. Ogni volta che il mouse passa sopra l'elemento, dovrebbe rimbalzare.
.animated: hover {
-webkit-animazione-durata: 1s;
-moz-animazione-durata: 1s;
-ms-animazione-durata: 1s;
-o-durata-animazione: 1s;
durata animazione: 1s;
-webkit-animation-fill-mode: entrambi;
-moz-animazione-modalità-riempimento: entrambi;
-ms-animazione-modalità-riempimento: entrambi;
-o-animazione-modalità-riempimento: entrambi;
modalità riempimento animazione: entrambi;
}
Se conosci i CSS, saprai molto meglio di me su come implementare effetti diversi per azioni diverse. Come principiante, questa e le librerie fornite in Animate.css mi aiutano a creare animazioni di base, ma efficaci per le mie pagine Web.
Non so quanti ne userei su un sito web dal vivo in quanto non sempre scendono troppo bene e gli utenti di dispositivi mobili non sembrano apprezzarli affatto. Tuttavia, come lezione su come funziona CSS e su come può essere utilizzato per migliorare il Web, è un'ottima risorsa. Sono solo un principiante, ma anche passare un paio d'ore con Animate.css per questo tutorial mi ha insegnato molto. Penso che ci giocherò molto di più prima di aver finito. E tu?
