пример
Сделайте что - нибудь с <div> элемент , когда CSS анимация закончилась:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction); Попробуй сам " Определение и использование
Событие animationend происходит, когда CSS анимация завершена.
Дополнительные сведения о CSS Animations см наш учебник по CSS3 анимации .
Когда CSS анимация играет, есть три события, которые могут произойти:
- animationstart - происходит после запуска CSS анимации
- animationiteration - возникает , когда CSS анимация повторяется
- animationend - возникает, когда CSS анимация завершена
Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает событие.
Числа следует "webkit" или "moz" указать первую версию , которая работала с префиксом.
| Мероприятие | |||||
|---|---|---|---|---|---|
| animationend | 4,0 WebKit | 10,0 | 16,0 5.0 Мос | 4,0 WebKit | 15,0 WebKit 12,1 |
Примечание: Для Chrome, Safari и Opera, используйте префикс webkitAnimationEnd.
Синтаксис
object.addEventListener("webkitAnimationEnd", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript );
// Standard syntax
Примечание: addEventListener() метод не поддерживается в Internet Explorer 8 и более ранних версий.
Технические подробности
| Пузыри: | да |
|---|---|
| аннулированию: | нет |
| Тип события: | AnimationEvent |
| DOM Версия: | Уровень 3 События |
Похожие страницы
Учебник CSS: CSS3 Animations
CSS Reference: CSS3 animation Property
HTML DOM ссылка: Style animation Property
<Объект Event