animace iterace Událost
Příklad
Udělejte něco s prvkem <div>, když se animace CSS opakuje:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Definice a použití
K události animationitation dochází, když se animace CSS opakuje.
Pokud je vlastnost CSS animation-itation-count nastavena na "1", což znamená, že animace bude přehrána pouze jednou, událost animationitration nenastane. Aby se tato událost spustila, musí animace běžet více než jednou.
Další informace o animacích CSS najdete v našem tutoriálu o animacích CSS3 .
Při přehrávání animace CSS mohou nastat tři události:
- animationstart - nastane, když se spustí CSS animace
- animace - nastává, když se animace CSS opakuje
- animationend - nastane, když je dokončena animace CSS
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která událost plně podporuje.
Čísla následovaná „webkit“ nebo „moz“ určují první verzi, která fungovala s předponou.
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Poznámka: Pro Chrome, Safari a Opera použijte předponu webkitAnimationIteration.
Syntax
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
Poznámka: Metoda addEventListener() není podporována v aplikaci Internet Explorer 8 a starších verzích.
Technické údaje
bubliny: | Ano |
---|---|
Zrušitelné: | Ne |
Typ události: | AnimationEvent |
Verze DOM: | Události úrovně 3 |
Související stránky
CSS tutoriál: CSS3 animace
Reference CSS: Vlastnost animace CSS3
Reference CSS: Vlastnost CSS3 animation-itation-count
Odkaz HTML DOM: Vlastnost animace stylu