HTML and CSS Reference
In-Depth Information
ease-in
: equivale ai valori (0.42, 0, 1.0, 1.0) della curva di bezier;
ease-out
: equivale ai valori (0, 0, 0.58, 1.0) della curva di bezier;
ease-in-out
: equivale ai valori (0.42, 0, 0.58, 1.0) della curva di bezier;
cubic-bezier
: permette di specificare dei valori personalizzati seguendo la sin-
tassi
transition-timing-function: cubic-bezier(
x1, y1, x2, y2).
Le transizioni sono estremamente potenti e permettono di creare effetti grafici che possono
migliorare notevolmente l'usabilità dell'interfaccia utente. Inoltre, le transizioni possono
essere associate alle trasformazioni, così da creare vere e proprie animazioni.
Nella sezione dedicata alle trasformazioni abbiamo visto come applicare una trasforma-
zione di tipo skew a un elemento. Alla trasformazione possiamo combinare una transi-
zione, così da creare una vera e propria animazione. Naturalmente, non siamo limitati
alla trasformazione di tipo skew, ma possiamo animare qualunque tipo di trasformazione.
Nell'esempio che segue, prendiamo un elemento
div
che facciamo ruotare di 360 gradi,
traslare di 100 pixel sull'asse orizzontale e ingrandire del 50%. A tutte le trasformazioni
assegniamo una transizione della durata di due secondi.
Esempio 5.24
div
{
height: 100px;
width: 100px;
border: solid 1px black;
transition-property: transform;
transition-duration: 2s;
}
div.anmate
{
transform: rotate(360deg) scale(1.5, 1.5) transla-
teX(180px);
}
