Uçağa animasyon ekle (CSS)

Aşağıdaki gibi bir animasyon yap (Uçağa tıkla):

Resim tıklanınca boyutu 40x24px’den 400x240px’e çıkıyor.
Animasyon 3 saniye sürüyor.
Bitince “Bitti!” diye mesaj göster.
Animasyon süresince uçağa birden çok kere tıklanabilir. Bu tıklamalar bir şeyi bozmamalıdır.

width ve height özelliklerinin animasyonu için CSS:

          /* orijinal class */

#flyjet {
  transition: all 3s;
}

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

Dikkat et! transitionend iki kere tetikleniyor – her özellik için bir kere. Eğer bir konrol yapmazsak mesaj 2 kere gözükecek.

Çözümü korunaklı alanda aç.