Proprietà CSS transition
Come usare la proprietà shorthand CSS transition per animare il passaggio tra due stati di un elemento. Sintassi, funzioni ed esempi pratici.
La proprietà CSS transition consente di animare la variazione del valore di una proprietà nel tempo, invece di applicarla istantaneamente. Quando il valore di una proprietà animabile cambia — ad esempio perché l'utente passa il cursore su un elemento o una classe viene attivata tramite JavaScript — transition fa sì che il browser interpoli in modo fluido dal vecchio valore al nuovo, producendo effetti di dissolvenza, scivolamento, ingrandimento e cambio colore senza alcun loop di animazione in JavaScript.
transition è una shorthand che imposta quattro proprietà longhand contemporaneamente:
- transition-property — quale proprietà animare (es.
width,opacity,all). - transition-duration — quanto dura la transizione (es.
2s,300ms). - transition-timing-function — la curva di andamento (es.
ease,linear,cubic-bezier(...)). - transition-delay — quanto attendere prima che inizi.
La proprietà transition è una delle proprietà CSS3.
Come si legge la shorthand
Una singola transizione si scrive così:
transition: <property> <duration> <timing-function> <delay>;Solo transition-property e transition-duration sono strettamente necessarie per ottenere un effetto visibile; la timing function predefinita è ease e il delay predefinito è 0s.
/* animate width over 2 seconds, default easing, no delay */
transition: width 2s;
/* full form: animate transform over 300ms with a custom curve, after a 100ms wait */
transition: transform 300ms ease-in-out 100ms;Il primo valore temporale letto dal parser è sempre la durata; il secondo è il ritardo. Quindi transition: opacity 1s 2s significa durata 1s, ritardo 2s — non il contrario.
Se si omette la durata, il valore predefinito è 0s, e una transizione da 0s è istantanea — l'effetto semplicemente non viene animato. Specificare sempre una durata.
Animare più proprietà
Per applicare la transizione a più di una proprietà, separare ogni gruppo con una virgola. Ogni proprietà può avere la propria durata, timing function e ritardo:
.box {
transition: left 1s ease-in-out,
background-color 1s ease-out 1s;
}Si può anche usare la parola chiave all per applicare la transizione a ogni proprietà animabile che cambia, anche se elencare le proprietà in modo esplicito è di solito più efficiente e prevedibile.
transition: all 0.3s ease;Il valore none è valido e disabilita le transizioni per le proprietà specificate.
Attivare una transizione
Una transizione non fa nulla da sola — viene eseguita solo quando una proprietà animabile cambia tra due stati. I trigger più comuni sono:
- Pseudo-classi come :hover, :focus o :active.
- L'attivazione di una classe tramite JavaScript (
element.classList.toggle('open')). - Modifiche allo stile inline da script (
element.style.opacity = 0).
Definire la transizione sullo stato base (riposo) dell'elemento, non sulla regola :hover. In questo modo l'animazione viene riprodotta sia quando lo stato si attiva sia quando torna allo stato originale.
I prefissi vendor come -webkit-, -moz- e -o- sono obsoleti e generalmente non necessari per i browser moderni.
| Initial Value | all 0s ease 0s |
|---|---|
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.transition = "all 3s"; |
Sintassi
Sintassi della proprietà CSS transition
transition: transition-property | transition-duration | transition-timing-function | transition-delay | initial | inherit;Esempio della proprietà transition con la pseudo-classe :active:
Esempio della proprietà CSS transition
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #8ebf42;
transition: width 2s;
}
div:active {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<p>Click and hold to see the transition effect.</p>
<div></div>
</body>
</html>Esempio della proprietà transition con la pseudo-classe :hover:
Esempio della proprietà CSS transition con la pseudo-classe :hover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.element {
padding: 20px;
width: 50px;
height: 50px;
left: 0;
background-color: #8ebf42;
position: relative;
transition: left 1s ease-in-out, background-color 1s ease-out 1s;
}
.example:hover .element {
left: 400px;
background-color: #1c87c9;
}
.element-2 {
transition: none;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<div class="example">
<p>Hover over the container to see the transition effect.</p>
<div class="element element-1"></div>
<p>No transition:</p>
<div class="element element-2"></div>
</div>
</body>
</html>Cose utili da sapere
- Solo le proprietà animabili vengono interpolate. Le proprietà numeriche e di colore (
width,opacity,color,transform) si animano; proprietà comedisplayofont-familycambiano istantaneamente. - Evitare i valori
auto. Una transizione tra un valore fisso eheight: autonon verrà animata, perché il browser non riesce a calcolare i valori intermedi. Usare invecemax-heightotransform: scaleY(). - Prestazioni.
transformeopacitysono le proprietà più economiche da animare perché non attivano il layout o il paint. Preferirle rispetto all'animazione dileft/topowidth/heightquando possibile. - Transition vs. animation. Usare
transitionper semplici cambi di stato da A a B; ricorrere a animation con@keyframesquando si ha bisogno di loop, più passaggi o movimenti che partono autonomamente.
Valori
| Valore | Descrizione |
|---|---|
| transition-property | Specifica i nomi delle proprietà da animare. |
| transition-duration | Specifica la durata dell'animazione di transizione. |
| transition-timing-function | Specifica la velocità nel tempo di un oggetto che passa da un valore a un altro. |
| transition-delay | Specifica il tempo di attesa prima che un effetto di transizione venga animato. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |