본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

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

아래 비행기 사진을 클릭하여 어떤 애니메이션 효과가 구현되어 있는지 살펴봅시다.

  • 사진을 클릭하면 크기가 40x24px 에서 400x240pxë¡œ 확대됩니다(10ë°° 확대).
  • 해당 효과는 3초가 소요됩니다.
  • 효과가 끝나면 얼럿 창에 '완료!'ê°€ 출력됩니다.
  • 애니메이션이 실행되는 동안에는 사진을 클릭해도 애니메이션이 중단되지 않습니다.

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

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.

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