CSS Transition的哥哥，CSS关键帧动画让我们通过在CSS“时间轴”上定义点以及在这些点上参与的CSS属性值来为CSS属性设置动画。
使用JavaScript，我们可以类似地插入关键帧动画的重要状态，特别是当关键帧动画已经开始，迭代或完全结束时。
相关的事件是
animationstart
，
animationiteration
和
animationend
分别。
再一次，为了使现实更好，我们需要考虑支持3个事件的前缀版本的旧浏览器。
随着中说，我们可以把以下内容函数返回的受支持版本
animationstart
，
animationiteration
或
animationend
：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
function
getanimationevent(suffix){
// enter "start", "iteration", or "end"<font></font>
var
root = document.documentElement<font></font>
var
suffix = suffix.toLowerCase()<font></font>
var
animations = {<font></font>
'animation'
:
'animation'
+ suffix,<font></font>
'OAnimation'
:
'oAnimation'
+ suffix.charAt(0).toUpperCase() + suffix.slice(1),
// capitalize first letter of suffix<font></font>
'MozAnimation'
:
'animation'
+ suffix,<font></font>
'WebkitAnimation'
:
'webkitAnimation'
+ suffix.charAt(0).toUpperCase() + suffix.slice(1)<font></font>
}<font></font>
<font></font>
for
(
var
a
in
animations){<font></font>
if
(root.style[a] !== undefined ){<font></font>
return
animations[a]<font></font>
}<font></font>
}<font></font>
return
undefined<font></font>
}<font></font>
<font></font>
// getanimationevent('start') // returns supported version of "animationstart" event as a string<font></font>
// getanimationevent('iteration') // returns supported version of "animationiteration" event as a string<font></font>
// getanimationevent('end') // returns supported version of "animationend" event as a string<font></font>
<font></font>
//Example usage:<font></font>
var
animationend = getanimationevent(
'end'
)<font></font>
if
(animationend ){<font></font>
element.addEventListener(animationend ,
function
(e){<font></font>
// do something after end of keyframe animation<font></font>
},
false
)<font></font>
}
|
该
事件对象
一旦填充了一些属性，如
event.elapsedTime
，它返回以秒为关键帧动画的持续时间。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
