Le animazioni
Le animazioni consentono di realizzare una sequenza di azioni temporizzate su un certo elemento. Vediamo subito un esempio:
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:
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:
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.
Sito realizzato in base al template offerto da
http://www.graphixmania.it