animationiteration Event
Tanım ve Kullanım
animationiteration olayı tekrarlanan CSS animasyonları sırasında meydana gelir.
Eğer CSS animation-iteration-count AtributeAyarlanmış "1" ise, animasyon sadece bir kez oynar ve animationiteration olayı meydana gelmez. Animationiteration olayını tetiklemek için animasyonun birden fazla kez çalışması gerekir.
CSS Animasyon hakkında daha fazla bilgi edinmek istiyorsanız, bizim kursumuzu öğrenin CSS3 Animasyon Tutorial。
当 CSS 动画播放时,可能会发生三个事件:
- animationstart - 当 CSS 动画开始时发生
- animationiteration - 当 CSS 动画重复时发生
- animationend - 当 CSS 动画完成时发生
实例
当 CSS 动画重复时,对 <div> 元素做一些事情:
var x = document.getElementById("myDIV"); // 针对 Chrome、Safari 以及 Opera 的代码 x.addEventListener("webkitAnimationIteration", myRepeatFunction); // 标准语法 x.addEventListener("animationiteration", myRepeatFunction);
语法
object.addEventListener("webkitAnimationIteration", myScript); // 针对 Chrome、Safari 以及 Opera 的代码 object.addEventListener("animationiteration", myScript); // 标准语法
注释:Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
冒泡: | 支持 |
---|---|
可取消: | 不支持 |
事件类型: | AnimationEvent |
DOM 版本: | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
数字后面的 "webkit" 或 "moz" 注明了使用前缀的首个版本。
事件 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
注释:对于 Chrome、Safari 以及 Opera,请使用 webkitAnimationEnd。
相关页面
CSS 教程:CSS3 动画
CSS 参考手册:CSS3 animation 属性
CSS 参考手册:CSS3 animation-iteration-count 属性
HTML DOM 参考手册:Style animation Atribute