Proprietà CSS transition-property

La proprietà CSS transition-property definisce quali proprietà di un elemento devono essere animate al cambiamento del loro valore. Accetta un elenco separato da virgole di nomi di proprietà, oppure la parola chiave all per animare ogni proprietà animabile dell'elemento.

Da sola, transition-property non produce alcun effetto visibile — si limita a indicare i target. È necessaria anche una transition-duration maggiore di 0s affinché il cambiamento sia graduale anziché istantaneo. Nella maggior parte del codice si impostano tutti e quattro i valori in una volta sola con la shorthand transition; transition-property è la forma longhand da usare quando si vuole controllare i tempi di ciascuna proprietà separatamente.

transition-property è una delle proprietà CSS3.

Cosa può e cosa non può essere animato

Una proprietà è animabile solo quando CSS sa come calcolare i valori intermedi tra un valore iniziale e uno finale. Come regola generale:

Animabile: qualsiasi elemento con un valore numerico o di colore — width, height, opacity, color, background-color, transform, left/top, font-size, letter-spacing, box-shadow, e così via.
Non animabile: valori di parole chiave discrete che non hanno un punto intermedio significativo — display, position, float, font-family. La modifica di queste avviene in modo istantaneo anche se vengono elencate in transition-property.

Attenzione

Non tutte le proprietà CSS possono essere animate. Elencare una proprietà non animabile (come display) non produce alcun effetto — il cambiamento avviene immediatamente.

Informazione

I prefissi vendor (ad esempio, -webkit-, -moz-, -o-) non sono più necessari per le transizioni CSS nei browser moderni.

Valore iniziale	all
Si applica a	Tutti gli elementi, pseudo-elementi ::before e ::after.
Ereditato	No.
Animabile	No (controlla quali proprietà vengono animate, ma non è animabile esso stesso).
Versione	CSS3
Sintassi DOM	object.style.transitionProperty = "height";

Nota: Nel CSS moderno è consigliato usare la proprietà shorthand transition.

Sintassi

Valori di CSS transition-property

transition-property: none | all | property | initial | inherit;

Esempio della proprietà transition-property:

Esempio di codice CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: height;
      }
      div:hover {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Qui solo height viene animato. Poiché width non è elencato, cambierebbe istantaneamente — ed è proprio per questo che nominare le proprietà è importante.

Esempio della proprietà transition-property con larghezza e altezza animate:

Altro esempio di codice CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: width, height;
      }
      div:hover {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Provalo tu stesso »

I due nomi di proprietà sono separati da una virgola. Si potrebbe anche scrivere transition-property: all per animare entrambi contemporaneamente, ma elencarli esplicitamente evita di animare accidentalmente proprietà non desiderate.

Esempio della proprietà transition-property con un colore di sfondo animato:

Esempio di transition-property con colore di sfondo animato:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        transition-duration: 1s;
        transition-property: background-color;
      }
      div:hover {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà transition-property con colore di sfondo e transizione dell'offset di posizione sinistra:

Esempio di transition-property con colore di sfondo e transizione dell'offset di posizione sinistra

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        cursor: pointer;
        background-color: #8ebf42;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
        left: 250px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Hover over the box to see the element's background color and left position offset transition.</p>
      <div class="element"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Si noti come l'elenco separato da virgole si allinei per posizione: la prima proprietà (background-color) usa la prima durata e la prima funzione di temporizzazione, mentre la seconda proprietà (left) usa la seconda di ciascuna. Questo abbinamento posizionale consente a ogni proprietà di animarsi con la propria transition-duration e transition-timing-function — qualcosa che la parola chiave all non può fare.

Esempio della proprietà transition-property con font animato:

Esempio di CSS transition-property con le proprietà letter-spacing, font-size e line-height

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        transition-duration: 0.6s;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6px;
        font-size: 26px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <span>Hover over the text to see the effect</span>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
none	Non verrà applicato alcun effetto di transizione.
all	L'effetto di transizione verrà applicato a tutte le proprietà.
property	Specifica un elenco separato da virgole di nomi di proprietà CSS per l'effetto di transizione.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Eredita questa proprietà dall'elemento genitore.

Proprietà correlate

transition-property è una delle quattro forme longhand che compongono una transizione. Vengono quasi sempre usate insieme:

transition-duration — quanto dura l'animazione.
transition-timing-function — la curva di accelerazione (ease, linear, cubic-bezier).
transition-delay — quanto tempo attendere prima che inizi.
transition — la shorthand che imposta tutti e quattro in una sola dichiarazione.

Esercitazione

Pratica

Quale affermazione è corretta riguardo a transition-property?

Tutte le proprietà CSS possono essere animate.Il valore 'all' può essere utilizzato.Non può contenere nomi di proprietà separati da virgola.