Transizioni CSS
Transizioni CSS
Le transizioni CSS ti consentono di modificare i valori delle proprietà in modo fluido, per una determinata durata.
Passa il mouse sopra l'elemento sottostante per vedere un effetto di transizione CSS:
In questo capitolo imparerai le seguenti proprietà:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Supporto del browser per le transizioni
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Come utilizzare le transizioni CSS?
Per creare un effetto di transizione, devi specificare due cose:
- la proprietà CSS a cui vuoi aggiungere un effetto
- la durata dell'effetto
Nota: se la parte relativa alla durata non è specificata, la transizione non avrà alcun effetto, poiché il valore predefinito è 0.
L'esempio seguente mostra un elemento <div> rosso 100px * 100px. L'elemento <div> ha anche specificato un effetto di transizione per la proprietà width, con una durata di 2 secondi:
Esempio
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
L'effetto di transizione inizierà quando la proprietà CSS specificata (larghezza) cambia valore.
Ora, specifichiamo un nuovo valore per la proprietà width quando un utente passa il mouse sull'elemento <div>:
Esempio
div:hover
{
width: 300px;
}
Si noti che quando il cursore esce dall'elemento, gradualmente tornerà al suo stile originale.
Modifica diversi valori di proprietà
L'esempio seguente aggiunge un effetto di transizione per la proprietà width e height, con una durata di 2 secondi per la larghezza e 4 secondi per l'altezza:
Esempio
div
{
transition: width 2s, height 4s;
}
Specificare la curva di velocità della transizione
La transition-timing-functionproprietà specifica la curva di velocità dell'effetto di transizione.
La proprietà della funzione di tempo di transizione può avere i seguenti valori:
ease- specifica un effetto di transizione con un inizio lento, poi veloce, quindi termina lentamente (questo è l'impostazione predefinita)linear- specifica un effetto di transizione con la stessa velocità dall'inizio alla fineease-in- specifica un effetto di transizione con avvio lentoease-out- specifica un effetto di transizione con una fine lentaease-in-out- specifica un effetto di transizione con un inizio e una fine lenticubic-bezier(n,n,n,n)- ti consente di definire i tuoi valori in una funzione cubic-bezier
L'esempio seguente mostra alcune delle diverse curve di velocità che possono essere utilizzate:
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;}
Ritarda l'effetto di transizione
La transition-delayproprietà specifica un ritardo (in secondi) per l'effetto di transizione.
L'esempio seguente ha un ritardo di 1 secondo prima dell'avvio:
Esempio
div {
transition-delay: 1s;
}
Transizione + Trasformazione
L'esempio seguente aggiunge un effetto di transizione alla trasformazione:
Esempio
div {
transition:
width 2s, height 2s, transform 2s;
}
Altri esempi di transizione
Le proprietà di transizione CSS possono essere specificate una per una, in questo modo:
Esempio
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
o utilizzando la proprietà shorthand transition:
Esempio
div
{
transition: width 2s linear 1s;
}
Proprietà di transizione CSS
La tabella seguente elenca tutte le proprietà di transizione CSS:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |