Filtra la ricerca ...
Frase esatta
Categorie

Come fare animazioni con CSS3

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

Oggi vediamo di divertirci un pò con le animazione di CSS3, c’è da dire che alcune di queste proprietà non sono correttamente visibili sui browser più antiquati, in fondo lascio una piccola legenda così da averla come promemoria nel caso doveste mai utilizzare il CSS3 animation in qualche progetto.

CSS3 Animations e compatibilità browser

La compatibilità browser è la seguente

Proprietà ie google_chrome firefox safari opera
@keyframes 10.0 4.0 -webkit- 16.0 5.0 -moz- 4.0 -webkit-

15.0 -webkit-

12.1 12.0 -o-

animation 10.0 4.0 -webkit- 16.0 5.0 -moz- 4.0 -webkit-

15.0 -webkit-

12.1 12.0 -o-

Cosa sono le animazione CSS3 ?

Con una CSS3 animation è possibile fare spostare un oggetto da un punto ad un altro della pagina (testo, div, ecc, ecc), è possibile utilizzare più animazioni conteporaneamente e per quante volte si vuole, per funzionare, un’animazione CSS3 necessita dei keyframes che sono delle istruzioni (regole o rules) sul movimento dell’oggetto da animare.

Esempi di animazione con CSS3

In questo esempio vediamo come un div passa dal colore verde a quello blu in 4 secondi

CSS

Analizziamo il codice CSS e vediamo come scriverlo correttamente

Riga 7  – animation-name : come si evince è il nome dell’animazione, possiamo chiamarla a piacimento purchè poi venga richiamata in modo identico dal keyframes ossia nelle righe 12 e 18.

Riga 8 – animation-duration : qui stiamo passando il numero (in secondi) della durata dell’animazione

Riga 19 e 20 – from / to : stiamo indicando che l’animazione passerà dal colore verde (from) al colore blu (to)

HTML

Per quanto concerne il codice HTML in questo caso è molto semplice, è sufficiente aprire e chiudere il tag div in quanto viene formattato già dal nostro CSS; il tag p fa solo figo 😀 in realtà non è necessario all’animazione, si può eliminare, modificare o sostituire con un qualunque altro tag.

Alcuni esempi di tipologie di animazione CSS3

Esistono altri parametri da poter passare nelle istruzione CSS così da avere animazione un pò più complesse, per esempio :

animation-delay: 1s  : indica il tempo impiegato per eseguire una determinata animazione, nel nostro quadrato il tempo che passa da verde a blu, anche qui il parametro è dato in secondi.

Valori supportati :  secondi|initial|inherit

animation-iteration-count: 3 : indica il numero di animazioni da eseguire, al termine ricomincia daccapo e così via per 3 volte o per il numero indicato.

Valore supportati : numerodivolte|infinite|initial|inherit

animation-direction: inverse : indica come eseguire l’animazione, nel nostro caso se viene specificato il valore “inverse” anzichè passare da verde (from) a blu (to) invertirà i parametri e quindi passerà da blu (to) a verde (from).

Valori supportati : normal|reverse|alternate|alternate-reverse|initial|inherit

Codice HTML / CSS completo

Questo è il codice completo di HTML e CSS3 per l’animazione in esempio.

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.