Una delle innovazioni di CSS3 è la capacità di creare transizioni e animazioni con comportamenti. L'animazione CSS3 può essere utilizzata in numerosi frame chiave per cambiare l'aspetto e il comportamento di un elemento. Un'animazione stabilisce molti punti di transizione basati su distinti frame chiave, mentre le transizioni ti consentono di passare da uno stato all'altro.

In questo articolo, esamineremo:

• Proprietà di transizione in CSS
• Come utilizzare la proprietà di transizione in CSS?

Va bene, iniziamo!

Cos'è la proprietà di transizione in CSS?

IL "Proprietà di transizione"Ci consente di modificare i valori della proprietà senza problemi in base alla durata specificata. Si verifica quando la proprietà CSS cambia il suo valore dall'una all'altra senza lampeggiare. A seconda del suo stato, può essere librata o attiva. Ora, passiamo alla sintassi della proprietà di transizione.

Sintassi

Ci sono due cose che devi specificare durante la creazione di un effetto di transizione:

• Aggiunta di un effetto a una proprietà CSS.
• Imposta la durata dell'effetto.

Seguire la seguente sintassi per aggiungere un effetto di transizione usando la proprietà di transizione:

Transition Property: Value;

Nel luogo di valore, aggiungi un effetto di transizione che si desidera applicare.

Segui la sintassi di seguito per aggiungere l'effetto di durata utilizzando la proprietà della durata di transizione:

durata della transizione: valore;

A seconda delle tue preferenze, puoi anche aggiungere un ritardo di transizione e una funzione di temporizzazione.

Ecco un esempio in cui implementiamo la transizione slide-in.

Come utilizzare la proprietà di transizione in CSS?

Possiamo usare "Proprietà di transizione"Su qualsiasi elemento come div, intestazione, pulsante e molti altri.

Usando un esempio, vediamo come funziona la proprietà di transizione.

Esempio: come scivolare dalla transizione a sinistra in CSS?

L'esempio seguente, creeremo un titolo

dentro il :

Scivolare dalla transizione a sinistra

Quando eseguiamo questo file HTML, mostrerà il seguente risultato:

Qui, possiamo vedere che viene presentata una semplice intestazione. Ora passeremo alla sezione CSS, dove applicare la proprietà di transizione al contenitore creato. A tale scopo, scriveremo il seguente codice:

div
larghezza: 150px;
Altezza: 150px;
Sfondo: Goldenrod;
Proprietà di transizione: larghezza;
Durata di transizione: 1s;

Il blocco di codice sopra serve le seguenti funzionalità:

larghezza e altezza: La dimensione di div è "150px"In larghezza e"150px" in altezza.

sfondo: Il colore del div è impostato su "Goldenrod".

Property di transizione: Abbiamo impostato la proprietà di transizione su larghezza; Attraverso questo, scivolerà da sinistra in transizione.

durata della transizione: "1s"O un secondo è la durata della transizione. Quando spostiamo il cursore dal Div, entro un secondo, andrà al suo stato originale.

Nota: Ogni volta che la proprietà della larghezza CSS cambia, l'effetto di transizione inizierà.

Ora prendi un nuovo valore per la proprietà di larghezza che verrà utilizzata per il mouse sull'elemento Div. La dimensione della proprietà di larghezza è impostata su "500px". Scivolo da sinistra a destra quando un cursore si sposta sull'elemento e quando si sposta il mouse dall'elemento, lo stile tornerà gradualmente al suo stato originale:

div: hover
larghezza: 500px;

Dopodiché, vai al file HTML ed eseguilo. Darà il seguente output:

Avendo applicato la proprietà di transizione al div, ora possiamo vedere che è attivo.

Conclusione

In CSS, per la diapositiva dalla transizione a sinistra, il “Proprietà di transizione" si usa. È possibile impostare l'effetto della transizione e la sua durata usando il “Proprietà di transizione" E "durata della transizione"Proprietà, rispettivamente. Con l'aiuto di un esempio, questo articolo ha dimostrato come la proprietà di transizione viene utilizzata per scivolare da sinistra a destra.