후속 클래스가 요소에 추가될 때마다 CSS 애니메이션을 실행하는 방법

Question

요소에 애니메이션을 적용할 수 있도록 CSS 애니메이션 클래스를 설정했습니다.

입력 버튼을 클릭하면 이 클래스가

에 추가되고 예제의 입력 버튼을 클릭할 때마다

가 화면으로 날아가도록 하고 싶습니다.

그러나 처음에만 작동하며 후속 입력 클릭에서는 요소에 애니메이션이 적용되지 않습니다. 내가 여기서 무엇을 놓치고 있는 걸까요?

으아아아 으아아아 으아아아

Answer 1

속성을 animation-name
을 none으로 재설정하려면 animationend

이벤트에 새 이벤트 리스너를 추가해야 합니다.

아래 코드와 같습니다:

으아악