Summary  
This chapter explains how to configure CSS transitions by specifying individual or multiple properties (or using “all”) via the transition-property property, alongside setting transition-duration, transition-timing-function, and transition-delay.

General domain of usage  
Web UI styling

È possibile specificare qualsiasi proprietà CSS come valore per la proprietà `transition-property`. Questo significa che si può applicare un effetto di transizione a qualsiasi proprietà.
```css
transition-property: ... /* any property */
```

Si considerano alcune proprietà tipiche su cui vengono applicate le transizioni. Le proprietà `transition-duration`, `transition-timing-function` e `transition-delay` rimarranno sempre invariate. Tutte le transizioni reagiranno al passaggio del cursore.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPgogICAgICAgIDxoMz5iYWNrZ3JvdW5kIHRyYW5zaXRpb248L2gzPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBmaXJzdC1leGFtcGxlIj4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEV2ZW5pZXQKICAgICAgICAgIG1haW9yZXMgbW9sZXN0aWFzLCB0ZW1wb3JhIGxhYm9yaW9zYW0gcXVpYnVzZGFtIHZvbHVwdGF0ZW0hCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8aDM+Zm9udCBzaXplIHRyYW5zaXRpb248L2gzPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBzZWNvbmQtZXhhbXBsZSI+CiAgICAgICAgICBMb3JlbSwgaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gUXVvIHNhZXBlCiAgICAgICAgICBudW1xdWFtIGl1cmUgbm9uLiBRdWlhLCBsYWJvcmUhCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8aDM+Ym9yZGVyIHRyYW5zaXRpb248L2gzPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCB0aGlyZC1leGFtcGxlIj4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFBsYWNlYXQKICAgICAgICAgIGFzcGVyaW9yZXMgZmFjaWxpcyBkb2xvcmlidXMgcmVydW0gcG9zc2ltdXMgc3VzY2lwaXQuCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8aDM+d2lkdGggdHJhbnNpdGlvbjwvaDM+CiAgICAgICAgPGRpdiBjbGFzcz0iYm94IGZvcnRoLWV4YW1wbGUiPgogICAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRGViaXRpcyBuZW1vCiAgICAgICAgICBhdCByZXBlbGxlbmR1cyBmdWdpdCBhbGlxdWFtIG1hZ25pLgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iaXRlbSI+CiAgICAgICAgPGgzPmNvbG9yIHRyYW5zaXRpb248L2gzPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBmaWZ0aC1leGFtcGxlIj4KICAgICAgICAgIExvcmVtLCBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBSZXB1ZGlhbmRhZSwKICAgICAgICAgIG5vc3RydW0gaXBzdW0hIFBlcnNwaWNpYXRpcyBldCBjb25zZXF1dW50dXIgaWxsdW0uCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8aDM+b3BhY2l0eSB0cmFuc2l0aW9uPC9oMz4KICAgICAgICA8ZGl2IGNsYXNzPSJib3ggc2l4dGgtZXhhbXBsZSI+CiAgICAgICAgICBMb3JlbSwgaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gU2FlcGUKICAgICAgICAgIGNvcnBvcmlzIHF1YWVyYXQgb21uaXMgZXhlcmNpdGF0aW9uZW0hIERvbG9yLCBwbGFjZWF0IQogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCgouZmlyc3QtZXhhbXBsZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogZ29sZDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBiYWNrZ3JvdW5kLWNvbG9yOwp9CgouZmlyc3QtZXhhbXBsZTpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9Cgouc2Vjb25kLWV4YW1wbGUgewogIGZvbnQtc2l6ZTogMTJweDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBmb250LXNpemU7Cn0KCi5zZWNvbmQtZXhhbXBsZTpob3ZlciB7CiAgZm9udC1zaXplOiAyMnB4Owp9CgoudGhpcmQtZXhhbXBsZSB7CiAgYm9yZGVyOiAycHggc29saWQgcmVkOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IGJvcmRlcjsKfQoKLnRoaXJkLWV4YW1wbGU6aG92ZXIgewogIGJvcmRlcjogNHB4IGRhc2hlZCBncmVlbjsKfQoKLmZvcnRoLWV4YW1wbGUgewogIG91dGxpbmU6IGF1dG87CiAgd2lkdGg6IDEwMCU7CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogd2lkdGg7Cn0KCi5mb3J0aC1leGFtcGxlOmhvdmVyIHsKICB3aWR0aDogMTAwcHg7Cn0KCi5maWZ0aC1leGFtcGxlIHsKICBjb2xvcjogcmdiKDE0MSwgMzMsIDIxKTsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvcjsKfQoKLmZpZnRoLWV4YW1wbGU6aG92ZXIgewogIGNvbG9yOiByb3lhbGJsdWU7Cn0KCi5zaXh0aC1leGFtcGxlIHsKICBvcGFjaXR5OiAxOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IG9wYWNpdHk7Cn0KCi5zaXh0aC1leGFtcGxlOmhvdmVyIHsKICBvcGFjaXR5OiAwLjI7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgouY29udGFpbmVyIHsKICBwYWRkaW5nOiAwcHggMTBweDsKICB3aWR0aDogNzAwcHg7CiAgbWFyZ2luOiAwIGF1dG87CgogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC13cmFwOiB3cmFwOwp9CgouaXRlbSB7CiAgd2lkdGg6IDIwMHB4OwogIGJvcmRlcjogMnB4IHNvbGlkIG9yYW5nZTsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDVweDsKICBtYXJnaW46IDVweDsKfQoKaDMgewogIG1hcmdpbi10b3A6IDBweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4OwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDE2cHg7Cn0KCi5ib3ggewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDEycHg7CiAgdGV4dC1hbGlnbjoganVzdGlmeTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAzMDBtczsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1pbi1vdXQ7CiAgdHJhbnNpdGlvbi1kZWxheTogMTAwbXM7Cn0=

### Proprietà di transizione multiple
È possibile utilizzare anche il valore `all` per la proprietà `transition-property`, il che significa che tutte le proprietà verranno sottoposte a transizione.
```css
transition-property: all;
```

Nel seguente esempio si desidera applicare la transizione alle modifiche delle proprietà `background-color`, `color`, `font-weight` e `font-size`. Consultare il file `index.css`:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBOaWhpbCByZXBlbGxhdAogICAgICB2b2x1cHRhdHVtLCBtYXhpbWUgbWludXMgcXVhcyBuZXF1ZSBpcHNhIG9kaW8gYWQgbGFib3Jpb3NhbSBlYXJ1bS4gQW5pbWksCiAgICAgIHNlZCBmdWdhIGRvbG9yZW1xdWUgbWluaW1hIHF1YW0gcXVpYnVzZGFtIHZvbHVwdGF0ZW0gZGVzZXJ1bnQgaWQuCiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgcGFkZGluZzogMTBweDsKICBmb250LXNpemU6IDE2cHg7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMTI0LCAxODEsIDIwMCk7CiAgY29sb3I6IHJnYigxNCwgMTQsIDg2KTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMDAwbXM7CiAgdHJhbnNpdGlvbi1kZWxheTogMTAwbXM7CiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW47CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogYWxsOwp9CgouY29udGFpbmVyOmhvdmVyIHsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDQwMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMTU4LCAyMDAsIDEyNCk7CiAgY29sb3I6IHJnYigxNTUsIDEyLCAxMik7Cn0=

Inoltre, se è necessario aggiungere una transizione a più proprietà ma non a tutte, è possibile specificarle come valore della proprietà `transition-property`, separandole con uno spazio. Ad esempio:
```css
transition-property: color border height;
```
Significa che la transizione verrà applicata alle proprietà `color`, `border` e `height`.

Cosa determina la proprietà `transition-property`?

Migliora le tue competenze di styling padroneggiando tecniche CSS avanzate per il web design moderno. Posiziona e gestisci gli elementi con precisione utilizzando strategie di posizionamento avanzate. Crea transizioni fluide e animazioni coinvolgenti per migliorare l'esperienza utente. Trasforma e manipola gli elementi per effetti visivi dinamici. Realizza design responsivi che si adattano a diversi dispositivi e ottimizza il flusso di lavoro con preprocessori CSS come Sass.

Scopri cosa possono aspettarsi gli studenti da questo corso avanzato di HTML e CSS. Quali conoscenze sono necessarie prima di iniziare il corso? Quali argomenti verranno trattati?

Posizionamento e gestione degli elementi nelle pagine web. Approfondimento delle diverse proprietà di posizionamento, utilizzo dell'ordine di sovrapposizione per controllare la visibilità degli elementi sovrapposti e gestione dell'overflow dei contenuti.

Esplora il potenziale delle transizioni e apprendi come migliorare l'esperienza utente. Scopri come animare le proprietà in modo fluido e graduale, creando transizioni di stato senza soluzione di continuità.

Scopri la proprietà animation e come può essere utilizzata per creare design dinamici e coinvolgenti. Approfondisci la creazione di animazioni complesse utilizzando i keyframe e il controllo dell'animazione.

Esplora la proprietà di trasformazione, che consente di modificare l'aspetto e la posizione degli elementi in una pagina web. Scopri come ridimensionare, ruotare, inclinare e traslare elementi in due e tre dimensioni. Combina più trasformazioni per creare effetti più complessi.

I principi e le tecniche utilizzate nel design adattivo/responsive mirano a rendere siti web e applicazioni accessibili e visivamente attraenti su diversi dispositivi, dimensioni dello schermo e orientamenti.

Scopri i preprocessori in CSS e come possono aiutare a scrivere codice più efficiente e manutenibile. Comprendi come utilizzare i preprocessori per semplificare il flusso di lavoro e generare codice CSS più pulito.

Scelta delle Proprietà di Transizione Appropriate

Proprietà di transizione multiple

Awesome!

Scelta delle Proprietà di Transizione Appropriate

Proprietà di transizione multiple