Animate a plane (CSS)
важливість: 5
Show the animation like on the picture below (click the plane):
- The picture grows on click from
40x24pxto400x240px(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.