CSS - transition 이벤트, animation 이벤트

 

🚀 transition 이벤트

transitionStart

CSS 트랜지션이 시작하면 이벤트가 발생한다.

transitionRun 

CSS 트랜지션이 꼭 시작하지 않았더라도 생성되었을 때 발생한다. 예를 들어 딜레이(transition-delay)가 2초로 설정된 경우, transitionRun 이벤트가 발생하고 2초 후에 transitionStart 이벤트가 발생한다.

transitionEnd

CSS 트랜지션이 끝나면 이벤트가 발생한다. 가장 자주 사용된다.

transitionCancel

CSS 트랜지션이 취소되면 이벤트가 발생한다. 트랜지션이 취소되면 transitionEnd 이벤트는 발생하지 않는다.

e.propertyName

트랜지션 대상 CSS 프로퍼티 이름을 나타낸다.

e.elapsedTime

delay를 제외한 트랜지션 실행 시간을 나타낸다.

e.pseudoElement

어떤 pseudo엘리먼트에서 트랜지션이 실행되고 있는지 나타낸다. ::로 시작하는 문자열이고, 만약 pseudo엘리먼트가 아닌 엘리먼트에서 트랜지션이 발생한거라면 빈 문자열이다.

 

🚀 animation 이벤트

animationStart

CSS 애니메이션이 시작하면 이벤트가 발생한다.

animationIteration 

CSS 애니메이션의 한 사이클이 끝나고 다음 사이클이 시작할 때 발생한다. 단, animationEnd가 발생할 때는 발생하지 않는다. animation-iteration-count가 1이거나, 마지막 iteration일 경우 발생하지 않는다.

animationEnd

CSS 애니메이션이 끝나면 이벤트가 발생한다. 

animationCancel

CSS 애니메이션이 갑작스럽게 종료되었을 때 발생한다. 즉, animationEnd 이벤트 발생 없이 애니메이션이 중단되었을 때 발생한다.

e.animationName

애니메이션 이름을 나타낸다.

e.elapsedTime

delay를 제외한 애니메이션 실행 시간을 나타낸다.

e.pseudoElement

어떤 pseudo엘리먼트에서 애니메이션이 실행되고 있는지 나타낸다. ::로 시작하는 문자열이고, 만약 pseudo엘리먼트가 아닌 엘리먼트에서 애니메이션이 발생한거라면 빈 문자열이다.