вернуться к уроку

Анимировать самолёт (CSS)

важность: 5

Реализуйте анимацию, как в примере ниже (клик на самолёт):

  • При нажатии картинка изменяет размеры с 40x24px до 400x240px (увеличивается в 10 раз).
  • Время анимации 3 секунды.
  • По окончании анимации вывести сообщение: «Анимация закончилась!».
  • Если во время анимации будут дополнительные клики по картинке – они не должны ничего «сломать».

Открыть песочницу для задачи.

CSS для анимации двух свойств width и height:

/* original class */

#flyjet {
  transition: all 3s;
}

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

При разработке следует учитывать, что событие transitionend сработает два раза – для каждого свойства (высота и ширина). Таким образом, если не предусмотреть дополнительную проверку, тогда сообщение появится два раза.

Открыть решение в песочнице.