Animate un aereo (CSS)

Definite un animazione che si comporti come quella mostrata nella figura sotto (cliccate l’areo):

L’immagine si ridimensiona al click da 40x24px a 400x240px (10 volte più grande).
L’animazione ha una durata di 3 secondi.
Al terminte dovrete mostrare: “Done!”.
Durante l’animazione, potrebbero esserci più click sull’aereo. Questi non dovrebbero comprometterne il funzionamento.

Qui vedete il CSS per animare sia width che height:

          /* classe originale */

#flyjet {
  transition: all 3s;
}

/* JS aggiunge il ridimensionamento */
#flyjet.growing {
  width: 400px;
  height: 240px;
}
        

Notate che transitionend si innesca due volte, una per ogni proprietà. Quindi senza definire un controllo adeguato, il messaggio verrà mostrato due volte.

Apri la soluzione in una sandbox.