Accueil / javascript / 7-animation / 2-css-animations / 1-animate-logo-css / solution.md

solution.md

Source Markdown

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.