Matukio ya animationiteration
Ufafanuzi na matumizi
Matukio ya animationiteration yanaathirika wakati mawingu inaendelea kwa upya.
Ikiwa Mwili wa animation-iteration-count wa CSSIliwa "1", inaeleza kwamba mawingu inaendelea kwa mara moja tu, haitatukua matukio ya animationiteration. Mawingu inahitaji kuelekea mara nyingi ili kuzindua matukio hii.
Kuelewa zaidi kuhusu mawingu ya CSS, tafadhali tafuta mafunzo yetu Mafunzo ya mawingu ya CSS3。
当 CSS 动画播放时,可能会发生三个事件:
- animationstart - 当 CSS 动画开始时发生
- animationiteration - 当 CSS 动画重复时发生
- animationend - 当 CSS 动画完成时发生
实例
当 CSS 动画重复时,对
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); // 标准语法
Maelezo:Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
冒泡: | 支持 |
---|---|
可取消: | 不支持 |
事件类型: | AnimationEvent |
DOM 版本: | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
Inaonyesha kichwa cha 'webkit' au 'moz' kinaonyesha kwa sababu ya kufungua mawili wa kwanza wa kufungua.
Tukio | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Maelezo:Kwa Chrome, Safari na Opera, tumia webkitAnimationEnd.
Pakua za hatua
Makao cha CSS:Animation ya CSS3
Kitabu cha CSS:Mwili wa CSS3 animation
Kitabu cha CSS:Mwili wa CSS3 animation-iteration-count
Kitabu cha HTML DOM:Mwili wa animation wa Style