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

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

важность: 5

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

  • Изображение растёт при клике с 40x24px до 400x240px .
  • Продолжительность анимации: 3 секунды.
  • По окончании вывести «Готово!».
  • Если в процессе анимации были дополнительные клики – они не должны ничего «сломать».

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

CSS-код для анимации одновременно width и height:

/* исходный класс */

#flyjet {
  transition: all 3s;
}
/* JS добавляет .growing *.
#flyjet.growing {
  width: 400px;
  height: 240px;
}

Небольшая тонкость с окончанием анимации. Соответствующее событие transitionend сработает два раза – по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.

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