Nel mio articolo della settimana scorsa sulle Animazioni con CSS, ho parlato di come iniziare ad utilizzare le animazioni per dare vita agli elementi della pagina. Oggi parliamo di un’altra funzionalità utile allo scopo, le transizioni.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Le transizioni permettono di cambiare lo stile degli elementi della pagina, a differenza delle animazioni, che in base al momento impostano delle proprietà specifiche, le transizioni ci consentono di cambiare valore su una o più proprietà di un oggetto decidendo in quanto tempo questa transizione debba avvenire. L’effetto di transizione inizierà quando la proprietà CSS specificata cambia valore. È importante ricordare che la direzione è sempre unica e unidirezionale, passo dal valore X della proprietà A al valore Y della proprietà A in N secondi.

Facciamo un esempio.

/* Proprietà dell'elemento */
div {
  position:relative;
  left:50%;
  width: 100px;
  height: 100px;
  background: green;
  transform: translateX(-50%);

  transition: width 1s;
}

/* Proprietà di variazione dell'elemento al passaggio del mouse */
div:hover {
  width: 300px;
}

L’esempio sopra dice che, il mio elemento div ha una transizione transition sulla lunghezza width della durata di 1 secondo. Significa che ogni volta che verrà modificato il valore della proprietà width, in questo caso andando con il mouse sopra all’elemento, si attiverà una transizione che porterà al nuovo valore animando l’oggetto per 1 secondo.

Come per le animazioni, anche per questa funzionalità sono presenti proprietà dedicate, vediamole.

Le proprietà di trasformazione

transition-delay
Specifica un ritardo (in secondi) per l’effetto di transizione.

transition-duration
Specifica la durata della trasformazione.

transition-property
Specifica quale proprietà, alla quale cambio il valore, deve attivare la transizione. i possibili valori sono:

• all – La transizione si attiva per qualsiasi proprietà che modifichiamo del nostro elemento (impostazione predefinita)
• nome della proprietà – Possiamo specificare una o più proprietà, separate da virgola, per le quali vogliamo attivare la transizione.

transition-timing-function
Specifica la curva di velocità dell’effetto di transizione, i possibili valori di questa proprietà sono i seguenti:

• ease – specifica un effetto di transizione con un avvio lento, quindi veloce, quindi termina lentamente (impostazione predefinita)
• linear – specifica un effetto di transizione con la stessa velocità dall’inizio alla fine
• ease-in – specifica un effetto di transizione con un avvio lento
• ease-out – specifica un effetto di transizione con una fine lenta
• ease-in-out – specifica un effetto di transizione con inizio e fine lenti
• cubic-bezier(n,n,n,n) – consente di definire i propri valori in una funzione cubica-bezier

transition
Questa proprietà è la classica scorciatoia presente in CSS, la possiamo utilizzare nel seguente modo…
transition: property duration timing-function delay|initial|inherit;

Tips

Ecco un modo molto comodo per specificare i valori, come nella proprietà transition-property posso specificare più valori, anche per la proprietà transition-duration posso specificare più valori separati da virgola, questo verranno mappati, in passa alla posizione, sulla proprietà specifica.

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

In questo esempio, opacity ci metterà 3s, left 5s, e così via.

Ma dove posso/devo usarla?

Personalmente utilizzo tantissimo le transizioni, le trovo particolarmente eleganti, perché di questo si parla, per la gestione degli stati degli elementi, usato in combinazione con JavaScript. Un altro campo nel quale le utilizzo è per la responsività e l’adattamento degli elementi nella pagina in fase di ridimensionamento del browser oppure per l’adattamento del contenuto per i dispositivi mobili.

Fammi sapere sui miei canali Social se questo articolo ti è stato utile e non dimenticare…

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Happy

0 0 %

Sad

1 100 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %