назад до уроку
Цей матеріал доступний лише такими мовами: 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.

Відкрити пісочницю для завдання.

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.

Відкрити рішення в пісочниці.