PROGRAMMIAMO
HTML - Animazioni con i CSS

Le animazioni

Le animazioni consentono di realizzare una sequenza di azioni temporizzate su un certo elemento. Vediamo subito un esempio:

@keyframes animazione {
from {
background-color: red;
opacity: 1.0;
transform: rotate(0deg);
}

33% {
background-color: blue;
opacity: 0.75;
transform: rotate(-20deg);
}

67% {
background-color: green;
opacity: 0.5;
transform: rotate(20deg);
}

to {
background-color: red;
opacity: 1.0;
transform: rotate(0deg);
}

}

div {
width: 100px;
height: 100px;


animation-name: animazione;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

L'effetto prodotto è mostrato qui sotto sul solito quadrato:

Per poter creare un'animazione bisogna per prima cosa definirla, assegnandole un nome (a piacere) e specificando gli stili che devono essere modificati ad ogni "fotogramma" dell'animazione:

@keyframes nome dell'animazione {

from {
stili applicati inizialmente (primo fotogramma)
}

33% {
fotogrammi intermedi
}

...

to {
fotogramma finale
}

}

A parte il fotogramma iniziale (from) e quello finale (to) che sono obbligatori e devono essere sempre presenti, è possibile suddividere l'animazione nel numero desiderato di fotogrammi, specificando il tempo in percentuale. Ad esempio from (0%), 20%, 40%, 60%, 80%, to (100%), se si vogliono realizzare 10 fotogrammi alla stessa distanza temporale uno dall'altro.

Una volta che l'animazione è stata definita e ha un nome, essa può essere applicata a un selettore (elemento, classe, id) del foglio stile in questo modo:

selettore {
animation-name: nome dell'animazione;
animation-duration: durata;
animation-iteration-count: iterazione;
animation-timing-function: timing;
}

La durata è ovviamente la durata totale dell'animazione in secondi. L'iterazione indica il numero di volte in cui l'animazione deve essere ripetuta (il valore di default è 1; infinite indica una ripetizione all'infinito).

Infine timing descrive come i valori intermedi usati durante l’animazione vengono calcolati. Senza voler qui approfondire l'argomento, il lettore può provare per proprio conto l'effetto dei diversi possibili valori di timing che sono: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it