[JS] Animation Event

CSS Animation 정리글

@keyframes ball-ani {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(200px, 200px);
    }
}

---

animationstart

ballElm.addEventListener('click', function () {
    ballElm.style.animation = `ball-ani 1s 3 alternate forwards`;
});

---

animationend

ballElm.addEventListener('animationend', function () {
    ballElm.classList.add('end');
});

---

animationiteration

애니메이션이 반복되는 시점을 잡아낼 수도 있음
재수 삼수 느낌. 현역 때는 안잡히고 반복 count만 함

// 분명 3번 반복인데 2번 찍히는 이유임

animation: ball-ani 1s 3 alternate forwards;

ballElm.addEventListener('animationiteration', function () {
    console.log('반복!');
});