CSS3 Transitions
transizioni CSS3 consente di modificare i valori delle proprietà senza problemi (da un valore all'altro), in un determinato periodo.
Esempio: il mouse sopra l'elemento qui sotto per vedere un effetto di transizione CSS3:
Supporto browser per Transitions
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz- , o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| 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- |
Come usare CSS3 Transitions?
Per creare un effetto di transizione, è necessario specificare due cose:
- la proprietà CSS che si desidera aggiungere un effetto a
- la durata dell'effetto
Nota: Se la parte della durata non è specificato, la transizione non avrà alcun effetto, in quanto il valore di default è 0.
L'esempio seguente mostra una 100px * 100px rosso <div> elemento. Il <div> elemento ha anche specificato un effetto di transizione per la proprietà di larghezza, con una durata di 2 secondi:
Esempio
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
L'effetto di transizione inizierà quando la proprietà CSS specificata (larghezza) cambia il valore.
Ora, cerchiamo di specificare un nuovo valore per la proprietà width quando un utente mouse sopra il <div> elemento:
Si noti che quando i topi cursore fuori l'elemento, sarà gradualmente tornare al suo stile originale.
Cambiare diversi valori di proprietà
L'esempio seguente aggiunge un effetto di transizione per la larghezza e la proprietà altezza, con una durata di 2 secondi per la larghezza e 4 secondi per l'altezza:
Esempio
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Prova tu stesso " Specificare la curva di velocità della transizione
La transition-timing-function proprietà specifica la curva di velocità dell'effetto di transizione.
La proprietà di transizione-timing-funzione può avere i seguenti valori:
-
ease- specifica un effetto di transizione con un avvio lento, poi veloce, poi finire lentamente (questa è l'impostazione predefinita) -
linear- specifica un effetto di transizione con la stessa velocità dall'inizio alla fine -
ease-in- specifica un effetto di transizione con un avvio lento -
ease-out- specifica un effetto di transizione con una fine lenta -
ease-in-out- specifica un effetto di transizione con un avvio lento e la fine -
cubic-bezier(n,n,n,n)- consente di definire i propri valori in un cubic-bezier funzione
L'esempio seguente mostra l'alcune delle diverse curve di velocità che possono essere utilizzati:
Esempio
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} Prova tu stesso " Ritardare l'effetto di transizione
La transition-delay proprietà specifica un ritardo (in secondi) per l'effetto di transizione.
L'esempio che segue ha un secondo di ritardo 1 prima della partenza:
Transizione + Trasformazione
L'esempio seguente aggiunge anche una trasformazione per l'effetto di transizione:
Esempio
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} Prova tu stesso " Altri esempi di transizione
Le proprietà CSS3 di transizione possono essere specificati uno per uno, in questo modo:
Esempio
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Prova tu stesso " o utilizzando la proprietà abbreviata transition :
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Proprietà CSS3 transizione
Nella tabella seguente sono elencate tutte le proprietà di transizione:
| Proprietà | Descrizione |
|---|---|
| transition | Una proprietà scorciatoia per settare le quattro proprietà di transizione in una singola proprietà |
| transition-delay | Specifica un ritardo (in secondi) per l'effetto di transizione |
| transition-duration | Specifica il numero di secondi o millesimi di secondo un effetto di transizione necessario per completare |
| transition-property | Specifica il nome della proprietà CSS l'effetto di transizione è per |
| transition-timing-function | Specifica la curva di velocità dell'effetto di transizione |