Анимировать самолёт (CSS)
важность: 5
Реализуйте анимацию, как в демке ниже (клик на картинку):
- Изображение растёт при клике с 40x24px до 400x240px .
- Продолжительность анимации: 3 секунды.
- По окончании вывести «Готово!».
- Если в процессе анимации были дополнительные клики – они не должны ничего «сломать».
CSS-код для анимации одновременно width и height:
/* исходный класс */
#flyjet {
transition: all 3s;
}
/* JS добавляет .growing *.
#flyjet.growing {
width: 400px;
height: 240px;
}Небольшая тонкость с окончанием анимации. Соответствующее событие transitionend сработает два раза – по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.