Back to the lesson

Animate a plane (CSS)

importance: 5

Show the animation like on the picture below (click the plane):

  • The picture grows on click from 40x24px to 400x240px.
  • The animation takes 3 seconds.
  • At the end output: “Done!”.
  • During the animation process, there may be more clicks. They shouldn’t “break” anything.

Open a sandbox for the task.

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.

Open the solution in a sandbox.