Animazione coi CSS in 2 minuti!

Stai pensando come creare una animazione sulla tua pagina web velocemente? Allora ti darò una dritta. Animazione veloce con animate.css. Semplice e leggero, animate.css è un mucchio di effeti divertenti che puoi utilizzare nei tuoi progetti. Adatti per le home page, slaider, landing page e tanto altro .

 Potrai vedere tutti gli effetti che si può creare sulla pagina dei sviluppatori animate.css.

Prima di tutto dovresti scaricare il fail animate.css dalla pagina sopra indicata e collegarlo al tuo sito.

<link rel="stylesheet" href="/animate.min.css">

oppure utilizare la versione dal server remoto

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Tutti gli effetti di animazioni sono basati su puro css. Quindi bastera solo questo fail di stile

Dopo di che tutto e molto semplice, scegli elemento sulla tua pagina e applica ad esso animazione desiderata tramite rispettiva classe del animate.css

<img src="/" class="animated infinite bounce">
//o
<h1 class="animated infinite bounce">Example</h1>
//animate infinite per rendere animazione infinita e animazione  scelta per la immagine è bounce

Esempi

sitoPizzeria2

 

Ciao sono animazione SHAKE

Ciao anche io sono animazione SHAKE ma piu lenta regolata e durero solo 6 cicli!

<style>
//provedimo di creare una classe per regolare la nostra animazione
.animazione2
{
animation-duration: 4s;//durata di un ciclo di animazione
animation-delay: 10s;//pausa prima del inizio 
animation-iteration-count: 6;//quantita cicli
}
</style>
//aplicheremo la classe creata e quella della animazione scelta ad elemento desiderato, nel nostro caso sara un paragrafo<p></p>
<p class="animazione2 shake" >Ciao anche io sono animazione SHAKE ma piu lenta regolata e durero solo 6 cicli!</p>

 

Essiste anche la possibilita di gestire animazione tramite jQuery. colegare per esempio la vostra animazione a qualche evento sulla pagina, per esempio ad un semplice clic.

Letto 613 volte