In questa lezione ricapitoleremo brevemente le funzionalità di CSS3 per mettere in movimento le nostre pagine web,
senza l’ausilio di alcun linguaggio di scripting. I concetti qui espressi serviranno per comprendere le lezioni successive, e possono essere approfonditi facendo riferimento ad alcuni capitoli della guida a CSS3 di HTML.it:
Transizioni
Le transizioni consentono il passaggio graduale tra due valori di una proprietà di un elemento CSS all’interno di un certo intervallo temporale.
È possibile specificare esattamente quattro proprietà per una transizione:
- transition-property: la proprietà CSS su cui si vuole applicare la transizione;
- transition-delay: indica dopo quanto tempo dal caricamento della pagina dovrà iniziare la transizione;
- transition-duration: la durata della transizione;
- transition-timing-function: la funzione di transizione temporale.
Un semplice esempio che altera la larghezza di un elemento <div>, dalla dimensione originale fino a portarla a 300 pixel è mostrato qui di seguito:
div:hover {
width: 300px;
}
div {
transition-property: width;
transition-delay: 2s;
transition-duration: 4s;
transition-timing-function: ease-out;
}In alternativa al secondo blocco di codice, si può utilizzare la sintassi abbreviata:
div {
transition: width 4s ease-out 2s;
}Il risultato di questa transizione può essere visionato a questo link.
Trasformazioni
Le trasformazioni possono essere 2D o 3D. Le trasformazioni 2D applicano effetti di traslazione, rotazione,
scalatura e distorsione; le trasformazioni 3D consentono anche la vista in prospettiva dell’oggetto da trasformare.
La proprietà da utilizzare per richiamare una trasformazione è transform. Essa può essere seguita eventualmente da
transform-origin, per modificare l’origine della trasformazione (specificare due valori o tre valori in base al tipo di trasformazione 2D/3D che si stanno effettuando).
Il seguente esempio ruota un elemento div di 70 gradi, e sposta l’origine di rotazione del 60% (asse X) e 80% (asse Y).
div {
transform: rotate(70deg);
transform-origin: 60% 80%;
}La proprietà transform può assumere i seguenti valori:
- matrix(n,n,n,n,n,n) e matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): definisce una trasformazione tramite matrice;
- translate(x,y), translate3d(x,y,z), translateX(x), translateY(y) e translateZ(z): definisce una traslazione;
- scale(x,y), scale3d(x,y,z), scaleX(x), scaleY(y) e scaleZ(z): definisce una scalatura;
- rotate(angle), rotateX(angle), rotateY(angle) e rotateZ(angle): definisce una rotazione;
- skew(x-angle,y-angle), skewX(angle) e skewY(angle): definisce una distorsione.
Le seguenti proprietà possono invece essere utilizzate solo per trasformazioni 3D:
- transform-style: specifica come devono essere trasformati gli elementi all’interno di un elemento che viene trasformato;
- perspective: definisce di quanti pixel viene spostata la vista sull’elemento CSS;
- backface-visibility: stabilisce se la faccia posteriore dell’elemento deve essere visibile all’utente.
L’effetto di una semplice trasformazione, combinata ad una transizione, può essere visionato a questo link.
Animazioni
Le animazioni sono probabilmente lo strumento più potente per il web motion design che mette a disposizione CSS3.
L’animazione consente di fare cambiare gradualmente stile ad un elemento della pagina.
In particolare, per ciascun cambiamento di stile bisogna specificare un keyframe.
Il keyframe determina il tipo di stile da applicare all’elemento ad un determinato istante temporale,
e fondamentalmente rappresenta il “codice” di esecuzione dell’animazione.
Le proprietà più salienti che possono essere impostate per le animazioni sono le seguenti:
- @keyframes: una lista di stili da applicare all’elemento a determinati istanti di tempo;
- animation: modalità abbreviata che serve ad impostare tutte le proprietà che seguono;
- animation-delay: indica dopo quanto tempo far partire l’animazione;
- animation-duration: specifica quanto dura l’animazione;
- animation-fill-mode: indica lo stile da applicare prima che l’animazione parta e dopo che termina;
- animation-name: nome dell’animazione;
- animation-timing-function: identica alla proprietà
transition-timing-functiondelle transizioni.
Il seguente esempio produce un’animazione che sposta in diagonale di 100px l’elemento a cui viene applicata,
e ne modifica il colore da rosso a verde per poi tornare rosso:
@keyframes esempio {
0% {background-color:red; left:0px; top:0px;}
50% {background-color:green; left:50px; top:50px;}
100% {background-color:red; left:100px; top:100px;}
}Successivamente, sarà sufficiente dichiarare l’elemento a cui applicare l’animazione come segue:
div {
width: 50px;
height: 50px;
background-color: red;
animation-name: example;
animation-duration: 2s;
}Le animazioni possono essere anche combinate tra di loro. A questo link è disponibile un esempio interattivo completo, che ne mostra tutte le potenzialità.
Tabella riassuntiva per l’utilizzo di transizioni, trasformazioni ed animazioni
La documentazione ufficiale del W3C,
mette a disposizione l’elenco completo delle proprietà associate a ciascuno degli effetti studiati in questa lezione.
La seguente tabella riassuntiva elenca il tipo di effetto, la relativa proprietà, e le versioni dei browser che la supportano.
È importante sottolineare che fino a poco tempo era necessario utilizzare le proprietà non standard supportate dai diversi browser: era sufficiente anteporre i prefissi: -webkit- per Chrome, Safari e Opera; -ms- per Internet Explorer; -moz- per Firefox;
-o- nelle versioni più recenti di Opera.
Fortunatamente, le ultime versioni di questi browser sono state adeguate allo standard, unificando di fatti la sintassi. L'uso delle proprietà non standard permette comunque di mantenere la retrocompatibilità con le versioni obsolete dei browser.
| Effetto | Proprietà |  |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| Transizione | transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
|
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
|
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
|
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
|
| Trasformazione | transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| transform-origin (due valori) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
12.1 10.5 -o- |
|
| transform-origin (tre valori) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
|
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
|
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
|
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
|
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
|
| Animazione | @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |