Animazioni con proprieta transition di CSS3

Realizzare animazione con la proprieta transition dei CSS3 è un po 'più facile rispettola  proprita animation. L'animazione con transition  inizia con un insieme di proprietà  fisse e finisce con un altro raggruppamento di proprieta. Vediamo subito un semplice esempio.

Come nel caso della proprietà animation di CSS3 anche nel trasition è possibile animare gli stessi gruppi di  proprietà di un elemento o di testo. Unica cosa che con la proprieta animation posiamo realizzare animazioni che partono da soli e possono durare infinito e usando transition in qualche modo dobiamo inescare l'animazione.  Trasformiamo il quadrato rosso nel rettangolo arancione quando si passa sopra con il mouse (stato hover), utilizzando insieme le proprietà background-color e width:

E vediamo il codice per capire il funzionamento

.box {
  width: 150px;
  height: 150px;
  background-color: red;
  transition: all 1s;/* con "all" abbiamo detto di aplicare proprieta trasition sia alla largezza sia al colore di sfondo e che i cambiamenti avengono in 1 secondo*/
}
.box:hover {
  width: 300px;
  background-color: orange;
}

Il codice dice che elemento con la classe  .box  dovra cambiare la larghezza e background-color quando si passa sopra con il puntatore del  mouse, transizione (animazione) sara eseguita in 1 secondo.

Una semplice animazione con transition.

Proviamo di fare qualcosa piu complicato. È possibile rendere la nostra animazione più attraente aggiungendo varie passagi, giocare con i valori di ritardo e durata. In questo modo  è possibile ottenere lo stesso effetto come nella animazione con @keyframe. Prendiamo il nostro esempio precedente e modifichiamolo.

In primo luogo, cambiamo  la larghezza, e quindi modificiamo il colore.

.box {
  transition: 
    /* passo 1 */
    width      1s,
    /* passo 2 */
    background 0.5s 1s;
}



Si può fare ancora meglio e aggiungere più passagi .

  1. Modificare la larghezza da 150px a 300px quando si passa con il mouse in 1 secondo.
  2. Cambiare il colore di background-color  da rosso ad arancione in 1 secondo.
  3. Aggiungere box-shadow  e cambiare la direzione del ombra sempre in quell 1 secondo.
  4. Aggiungere testo, che compare  poco a poco e sparisce verso sinistra alla fine di modifica di larghezza e l'altezza.
  5. L'aggiungere un altro testo che compare da destra dopo che la prima stringa con il testo scompare.

Gli elementi dove vengono animati piu di una proprietà posiamo raccoglierli in una sola animazione transition.

Stili CSS per animazione con transition.

/* il nostro box */
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 150px;
  height: 150px;
  background-color: red;
  color: white;
  box-shadow: 5px 5px 25px #000;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  transition: 
    all 1s;
}
/* hover... */
.box:hover {
  width: 300px;/* aumentiamo width */
  background-color: orange;/* cambio colore*/
  box-shadow: -5px 5px 25px #000;/* spostiamo ombra*/
}
/* La prima scritta  */
.box__blurb{
  opacity: 1;/* Cominciamo con il colore solido e centriamola  */
  transform: translateX(45px);
  transition:/* dopo di che lentamente cambiamo questi due proprieta  */
    opacity 0.5s 2s,
    transform 0.5s 0.5s;
}
.box:hover .box__blurb /* .box hover... */
{
  opacity: 0;/* rendiamo trasparente  */
  transform: translateX(-500px);/* portiamo a destra  */
}
/* Seconda scritta */
.rect__blurb {
  opacity: 0;   /* elemento al inizio si trova al di fuori della  nostra scatola ed e trasparente  */
  transform: translateX(500px);
  transition: /*  cambiamo le due proprietà  */
    opacity 0.5s 1s,
    transform 0.5s 1s;
}
/* .box hover... */
.box:hover .rect__blurb {
  opacity: 1;/* rendiamo visibile il testo */
  transform: translateX(-100px);/* arrivo del testo da destra */
}

La struttura html del box

<div class="box">
  <span class="box__blurb">Sono scatola</span>
  <span class="rect__blurb">Sono rettangolo</span>
</div>

Sono scatola Sono rettangolo

Hai provato di utilizzare un'animazione a più passagi nei tuoi progetti?, e se sì, come? Hai creato una super animazione, con tantisimi passagi? O hai fatto soltanto piccoli inserimenti per migliorare asspeto del tuo sito? Condividi con noi  la tua eseprienza nei commenti.

Letto 1382 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso