Rotazione
Per ruotare un elemento dobbiamo usare la proprietà transform con valore rotate seguito dal numero di gradi di cui vogliamo farlo ruotare. L'immagine ruoterà attorno al suo punto centrale. Nell'esempio un'immagine viene ruotata di 90 gradi.
Ingrandimento/rimpicciolimento
Per ingrandire o rimpicciolire un elemento dobbiamo usare la proprietà transform con valore scale seguito dal fattore di scala. Nell'esempio un'immagine viene ingrandita fino a diventare il doppio.
Possiamo anche scalare diversamente sull'asse orizzontale e verticale, basta indicare due valori. Nell'esempio un'immagine, quando si passa sopra il mouse, diventa lunga il doppio e alta la metà.
Per scalare solo su uno degli assi dobbiamo usare i valori scaleX o scaleY. Nell'esempio un'immagine diventa alta il doppio ma la larghezza non cambia.
Assegnare dei valori negativi alla scala produce un effetto diverso, cioè la riflessione. Nell'esempio un'immagine viene riflessa sull'asse orizzontale e la scritta appare a testa in giù.
In questo esempio l'immagine viene riflessa sull'asse verticale attorno al suo punto centrale e appare con la parte destra a sinistra e viceversa.
Spostamento
Per spostare un elemento dobbiamo usare la proprietà transform con valore translate seguito da due valori: lo spostamento sull'asse orizzontale e quello sull'asse verticale. Lo spostamento viene applicato al punto centrale. Nell'esempio un'immagine viene spostata di 10px a destra e 10px in basso quando il mouse passa sopra di essa.
Per spostare solo su uno degli assi dobbiamo usare i valori translateX o translateY. Nell'esempio un'immagine viene spostata di 20px in alto.
Inclinazione
Per inclinare un elemento dobbiamo usare la proprietà transform con valore skew seguito dai gradi di cui vogliamo inclinare l'elemento sull'asse x e y. Nell'esempio un'immagine viene inclinata verso sinistra di 45 gradi.
Per inclinare solo su uno degli assi dobbiamo usare i valori skewX o skewY. Nell'esempio un'immagine viene inclinata di 45 gradi verso destra.
Trasformazioni multiple
E' possibile applicare più trasformazioni contemporaneamente che verranno applicate dal browser nell'ordine in cui sono scritte. Nell'esempio un'immagine viene prima inclinata, poi rimpicciolita, poi spostata e poi ruotata.
Punto di origine della trasformazione
Di norma il punto dal quale si parte per calcolare le trasformazioni è il centro dell'elemento. Per cambiare il punto di origine dobbiamo usare la proprietà transform-origin con due valori (posizione orizzontale e verticale) che determinano il nuovo punto di origine. I valori possono essere espressi con le parole chiave top, bottom, right, left, con le percentuali, in pixel o em. Nell'esempio un'immagine viene ruotata di 90 gradi ma il punto in alto a sinistra rimane fermo e il resto dell'immagine si sposta attorno a quel punto.
Transizioni
Una transition è un'animazione che fa passare un elemento da un certo stato ad un altro, per esempio dallo stato normale allo stato ruotato o inclinato. Le proprietà che possono essere coinvolte nella transition sono:
| background-color | background-position | border-bottom-color | border-bottom-width |
| border-left-color | border-left-width | border-right-color | border-right-width |
| border-spacing | border-top-color | border-top-width | bottom |
| clip | color | font-size | font-weight |
| height | left | letter-spacing | line-height |
| margin-bottom | margin-left | margin-right | margin-top |
| max-height | max-width | min-height | min-width |
| opacity | outline-color | outline-width | padding-bottom |
| padding-left | padding-right | padding-top | right |
| text-indent | text-shadow | top | vertical-align |
| visibility | width | word-spacing | z-index |
Per prima cosa bisogna definire le regole CSS che si applicano allo stato di partenza e a quello di arrivo, in questo esempio partiamo da un paragrafo con un testo e un bordo rossi e vogliamo arrivare ad un testo e un bordo blu quando il mouse passa sopra l'elemento.
Possiamo personalizzare sia il passaggio dal primo al secondo stato che il ritorno dal secondo al primo.
Per indicare quali proprietà vogliamo che siano coinvolte nella transition dobbiamo usare la proprietà transition-property.
Per indicare la durata della transizione dobbiamo usare la proprietà transition-duration con un valore espresso in secondi o millisecondi. Possiamo anche assegnare diverse durate alle diverse proprietà.
Per indicare la curva della velocità della transizione dobbiamo usare la proprietà transition-timing-function che può avere cinque valori: linear (la velocità rimane costante), ease (la transition inizia piano, poi aumenta la sua velocità, poi torna alla velocità di partenza), ease-in, ease-out, and ease-in-out. Si possono anche definire cambi di velocità personalizzati assegnando il valore cubic-bezier(); .
Per definire un ritardo nell'inizio dell'animazione, per esempio per far eseguire più transizioni in sequenza, dobbiamo usare la proprietà transition-delay con un valore espresso in secondi o millisecondi.
E' anche possibile scrivere tutte le proprietà in una sola, specificando nell'ordine: proprietà, durata, timing function e ritardo.
Applicando una transizione alla proprietà opacity di due immagini sovrapposte possiamo simulare un'effetto cosiddetto "fade".
Animazioni
Un'animazione può essere intesa come una serie di transition dove lo stato di partenza, quello di arrivo e quelli intermedi sono definiti da keyframes.
Per definire un'animazione dobbiamo scegliere un nome da assegnarle e almeno due keyframes, il primo (0%) e l'ultimo (100%). I keyframes intermedi avranno un valore percentuale che indicherà il momento in cui si deve attivare la proprietà CSS definita.
Nell'esempio l'animazione si chiama "esempio" e il colore del testo e del bordo passano da rosso a blu a giallo.
In seguito si richiama l'animazione tramite il suo nome con la proprietà animation-name e si definisce la sua durata tramite la proprietà animation-duration. Nell'esempio quando il mouse passa sopra il paragrafo il suo testo e bordo partono rossi, poi diventano blu e alla fine diventano gialli. Il tutto dura 2 secondi.
Per indicare la curva della velocità della transizione tra due keyframes o dell'intera animazione dobbiamo aggiungere la proprietà animation-timing-function che può avere cinque valori: linear (la velocità rimane costante), ease (la transition inizia piano, poi aumenta la sua velocità, poi torna alla velocità di partenza), ease-in, ease-out, and ease-in-out. Si possono anche definire cambi di velocità personalizzati assegnando il valore cubic-bezier(); . Se definiamo una sola timing-function la indichiamo nell'elemento, se definiamo diverse timing-function per ogni pezzo dell'animazione le indichiamo nella dichiarazione dei keyframes.
Per definire un ritardo nell'inizio dell'animazione dobbiamo aggiungere la proprietà animation-delay con un valore espresso in secondi o millisecondi.
Se inseriamo un valore negativo quando l'animazione partirà lo farà con il ritardo indicato ma non dall'inizio, bensì dal punto in cui sarebbe stata in quel momento se non ci fosse stato nessun ritardo. Nell'esempio l'animazione partirebbe dopo un secondo ma dal colore blu.
Per definire per quante volte l'animazione deve essere compiuta dobbiamo aggiungere la proprietà animation-iteration-count, con un valore numerico o la parola chiave infinte per far ripetere l'animazione a ciclo continuo. Nell'esempio se lasciamo il mouse sopra il paragrafo per dieci secondi vedremo cinque iterazioni dell'animazione. Inserendo un valore come 5.5 l'ultima animazione si fermerà al colore blu.
Possiamo aggiungere la proprietà animation-direction che può avere quattro valori: normal (l’animazione viene eseguita normalmente), reverse (l'animazione viene eseguita in direzione inversa), alternate (l'animazione viene eseguita una volta normalmente e una volta in direzione inversa), alternate-reverse (l'animazione viene eseguita una volta in direzione inversa e una volta normalmente).
Per definire cosa deve succedere prima dell'inizio dell'animazione e dopo possiamo aggiungere la proprietà animation-fill-mode che può avere tre valori: backwards (prima dell'inizio dell'animazione l'elemento assume le proprietà definite dal primo keyframe), forwards (dopo la fine dell'animazione l'elemento rimane nello stato in cui si trova alla fine dell'animazione) o both (vengono applicate entrambe le regole).
Per definire se l'animazione deve partire automaticamente o meno possiamo aggiungere la proprietà animation-play-state che può avere due valori: running (l'animazione parte automaticamente) o paused (l'animazione è inizialmente in pausa). Nel nostro esempio possiamo applicare l'animazione al paragrafo nel suo stato normale con valore paused e farla partire quando il mouse passa sopra di esso. Così facendo quando spostiamo il mouse dal paragrafo e poi lo riposizioniamo l'animazione non riparte dall'inizio ma da dove si era interrotta.
E' anche possibile scrivere tutte le proprietà in una sola (shorthand property) specificando nell'ordine nome, durata, timing-function, ritardo, iteration-count, direzione, fill-mode, play-state.
N.d.R. verificare perchè la shorthand property funziona meglio che dichiarare le singole proprietà singolarmente.
Riepilogo
| Nome | Valori accettati | Valore di default |
|---|---|---|
| animation | valori singola animazione | vedi proprietà individuali |
| animation-delay | durata ritardo animazione espressa in secondi o millisecondi | 0s |
| animation-direction | normal / reverse / alternate / alternate-reverse | normal |
| animation-duration | durata animazione espressa in secondi o millisecondi | 0s |
| animation-fill-mode | forwards / backwards / both | none |
| animation-iteration-count | numero di volte per cui deve essere ripetuta l'animazione / infinite | 1 |
| animation-name | nome scelto per l'animazione | none |
| animation-play-state | running / paused | running |
| animation-timing-function | linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier() | ease |