돌아가기

비행기에 애니메이션 효과주기 (CSS)

아래 사진의 애니메이션 효과 보기 (비행기를 클릭해보세요):

  • 사진을 클릭하면 40x24px 에서 400x240px로 확대됩니다. (10배 확대)
  • 해당 효과는 3초가 소요됩니다.
  • 다음 메시지가 출력됩니다.: “Done!”
  • 애니메이션이 실행되는 동안에는 사진을 클릭해도 애니메이션이 중단되지 않습니다.

샌드박스를 열어 정답을 작성해보세요.

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.

샌드박스를 열어 정답을 확인해보세요.