Categoria:

Tutorial: animazioni con CSS3

02/01/2014 21:34 Pubblicato da
Share on FacebookTweet about this on TwitterGoogle+Share on Reddit

animazioni_32
Di seguito mostrerò come creare una semplice animazione utilizzando CSS3. Un animazione è semplicemente il passaggio di un elemento del DOM da un foglio di stile ad un altro foglio di stile. Le animazioni consistono di uno stile che descrive l’animazione CSS e di un set di keyframes che indicano lo stile dell’animazione in determinati intervalli di tempo. In poche parole lo stile di un’animazione è caratterizzata da uno stato iniziale, uno finale e da uno o più stati intermedi.

Demo Download

Si possono individuare svariati vantaggi delle CSS3 animations, in particolare si possono creare animazioni senza la necessità di avere conoscenze JavaScript ed inoltre sfruttando le animazioni di CSS3 si permette al browser di controllare la sequenza delle animazioni e quindi sarà il browser ad occuparsi della ottimizzazione delle performance e dell’efficienza.

Un’animazione può avere le seguenti proprietà:
animation-delay – consente di impostare un ritardo di tempo prima che parta l’animazione.

animation-direction – specifica se l’animazione debba alternare la direzione o meno

animation-duration – permette la specifica dell’intervallo di tempo che l’animazione impiegherà per completare un ciclo

animation-iteration-count – consente di specificare il numero di volte che un’animazione sarà riprodotta prima che essa si concluda.

animation-name – specifica il nome dei @keyframes che ci consentirà di specificare gli stati chiave della nostra animazione in determinati intervalli di tempo

animation-play-state – permette di mettere in pausa o ripristinare un’animazione. In caso di ripristino, l’animazione ripartirà da quell’istante in cui è stata messa in pausa.

animation-timing-function – offre la possibilità di specificare il modo di avanzamento della durata di un ciclo dell’animazione

animation-fill-mode – permette di specificare come un’animazione dovrà applicare gli stili al suo target prima e dopo la sua esecuzione

@keyframes NOME_ANIMAZIONE – consente di specificare gli stati della nostra animazione in determinati intervalli di tempo

Si può usare anche una abbreviazione per specificare tutte le precedenti proprietà in una singola riga utilizzando la keyword animation:

dove animname indica il nome dei @keyframes, 1s il delay, 2s la durata, 3 il numero di cicli prima che l’animazione si concluda, alternate la animation-direction e backward la animation-fill-mode

Proviamo a creare una semplice animazione che utilizza le proprietà precedentemente descritte.
Definiamo un wrapper all’interno del quale inseriremo due elementi: una luna e una nuvola.

La luna è composta da un box esterno e due box interni. I box interni presentano un border-radius pari al 50% e una position relative. In questo modo otteniamo due circonferenze che si possono sovrapporre. Il box più esterno definisce le caratteristiche della nostra animazione, in particolare il nome dell’animazione (moon), la sua durata pari a 30 secondi, l’animation-timing-function equivalente a ease, in questo modo si otterrà una partenza rapida e un completamento dell’animazione lento.

La nuvola #d-cloud è composta da un box esterno e tre box interni. Ognuno di questi ultimi ha un border-radius pari al 50% e la loro posizione è di tipo absolute, in questo modo otteniamo delle circonferenze sovrapposte. L’elemento #d-cloud ha un comportamento simile a d-moon.

Qui di seguito riporto anche il segmento di codice HTML.

Demo Download

21/07/2017 10:14

Leave a Reply

Your email address will not be published. Required fields are marked *