الرجوع الي الدرس
هذة المادة العلميه متاحه فقط باللغات الأتيه: English, Español, 日本語, 한국어, Русский, Türkçe, 简体中文. من فضلك, ساعدنا قم بالترجمه إلى عربي.

Animate a plane (CSS)

الأهمية: 5

Show the animation like on the picture below (click the plane):

  • The picture grows on click from 40x24px to 400x240px (10 times larger).
  • The animation takes 3 seconds.
  • At the end output: “Done!”.
  • During the animation process, there may be more clicks on the plane. They shouldn’t “break” anything.

افتح sandbox للمهمه.

CSS to animate both width and height:

/* original class */

#flyjet {
  transition: all 3s;
}

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

Please note that transitionend triggers two times – once for every property. So if we don’t perform an additional check then the message would show up 2 times.

افتح الحل في sandbox.