Derse geri dön

Uçağa animasyon ekle (CSS)

önem: 5

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.

Görevler için korunaklı alan aç.

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ç.