نريد أن نتيح هذا المشروع المفتوح المصدر إلى كل الناس حول العالم. من فضلك ساعدنا على ترجمة محتوى هذه السلسله للغة التى تعرفها.
خريطة الدورة التعليمية
الرجوع الي الدرس
هذة المادة العلميه متاحه فقط باللغات الأتيه: English, Español, Indonesia, Italiano, 日本語, 한국어, Русский, 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.