비행기에 애니메이션 효과주기 (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.