Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Combinazione di Transizioni | Creazione di Transizioni Fluide in CSS
Tecniche CSS Avanzate

bookCombinazione di Transizioni

È possibile combinare tutte le proprietà relative alle transizioni in un'unica riga.

transition: <property> <time> <time_function> <delay>;

Si supponga di dover aggiungere una proprietà di transizione all'elemento. I requisiti sono:

  • la modifica della proprietà background-color;
  • la durata è 1.2s;
  • la funzione temporale deve essere ease-in-out;
  • il ritardo è 250ms.

Forma estesa

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Forma compatta

transition: background-color 1200ms ease-in-out 250ms;

Nota

Non c'è alcuna differenza di sintassi per il browser. Possiamo scegliere l'opzione che preferiamo.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 6

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.04

bookCombinazione di Transizioni

Scorri per mostrare il menu

È possibile combinare tutte le proprietà relative alle transizioni in un'unica riga.

transition: <property> <time> <time_function> <delay>;

Si supponga di dover aggiungere una proprietà di transizione all'elemento. I requisiti sono:

  • la modifica della proprietà background-color;
  • la durata è 1.2s;
  • la funzione temporale deve essere ease-in-out;
  • il ritardo è 250ms.

Forma estesa

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Forma compatta

transition: background-color 1200ms ease-in-out 250ms;

Nota

Non c'è alcuna differenza di sintassi per il browser. Possiamo scegliere l'opzione che preferiamo.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 6
some-alt