CSS3: transizioni, trasformazioni e animazioni

7 dicembre 2017

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-function delle 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.

EffettoProprietà

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-

Tutte le lezioni

1 2 3 ... 8

Se vuoi aggiornamenti su CSS3: transizioni, trasformazioni e animazioni inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su CSS3: transizioni, trasformazioni e animazioni

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing