Анимировать самолёт (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
сработает два раза – для каждого свойства (высота и ширина). Таким образом, если не предусмотреть дополнительную проверку, тогда сообщение появится два раза.