Событие animationend
Пример animationend
Сделайте что-нибудь после завершения CSS-анимации:
const div1 = document.getElementById("myDIV");
div1.addEventListener("animationend", myEndFunction);
Попробуйте сами »
Описание animationend
Событие animationend происходит, когда CSS анимация завершена.
События анимаций animationend
| Событие | Происходит, когда |
|---|---|
| animationstart | CSS Анимация началась |
| animationend | CSS Анимация завершена |
| animationiteration | CSS Анимация повторяется |
Свойства анимаций animationend
| Свойство | Описание |
|---|---|
| animationName | Имя анимации |
| elapsedTime | Количество секунд, в течение которых длилась анимация |
| pseudoElement | Имя псевдоэлемента анимации |
Связные страницы animationend
Анимация Объект Event
Style Свойство анимации
Учебник animationend
Технические детали animationend
| Bubbles: | Да |
|---|---|
| Cancelable: | Нет |
| Тип событий: | AnimationEvent |
| DOM Версия: | События 3 уровня |
Поддержка animationend
onanimationend является особенностью DOM уровня 3 (2004).
Он полностью поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 11 |