<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<title></title>
<style>
#div1{width:100px; height:100px; background-color:#F00;}
.slidein{-webkit-animation-duration:3s; -webkit-animation-name:slidein; -webkit-animation-iteration-count:3; -webkit-animation-direction:alternate;}
@-webkit-keyframes slidein{
from {margin-left:100%;}
to {margin-left:0%;}
}
</style>
</head>
<body>
<div id="div1"></div>
<ul id="output"></ul>
<script>
function listener(e){
var l = document.createElement("li");
switch(e.type){
case "webkitAnimationStart":
l.innerHTML = "开始:" + e.elapsedTime;
break;
case "webkitAnimationEnd":
l.innerHTML = "结束:" + e.elapsedTime;
break;
case "webkitAnimationIteration":
l.innerHTML = "迭代一次:" + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(l);
}
function setup(){
var e = document.getElementById("div1");
e.addEventListener(" webkitAnimationStart",listener,false);
e.addEventListener(" webkitAnimationEnd",listener,false);
e.addEventListener(" webkitAnimationIteration",listener,false);
e.className = "slidein";
}
setup();
</script>
</body>
</html>
注释:
webkitAnimationStart 动画开始时触发
webkitAnimationEnd 动画结束时触发
webkitAnimationIteration 动画每迭代一次触发一次该事件
这三种类型的事件对象中都有一个elapsedTime属性,表示距离动画开始已经过去了多少时间
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<title></title>
<style>
#div1{width:100px; height:100px; background-color:#F00;}
.slidein{-webkit-animation-duration:3s; -webkit-animation-name:slidein; -webkit-animation-iteration-count:3; -webkit-animation-direction:alternate;}
@-webkit-keyframes slidein{
from {margin-left:100%;}
to {margin-left:0%;}
}
</style>
</head>
<body>
<div id="div1"></div>
<ul id="output"></ul>
<script>
function listener(e){
var l = document.createElement("li");
switch(e.type){
case "webkitAnimationStart":
l.innerHTML = "开始:" + e.elapsedTime;
break;
case "webkitAnimationEnd":
l.innerHTML = "结束:" + e.elapsedTime;
break;
case "webkitAnimationIteration":
l.innerHTML = "迭代一次:" + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(l);
}
function setup(){
var e = document.getElementById("div1");
e.addEventListener(" webkitAnimationStart",listener,false);
e.addEventListener(" webkitAnimationEnd",listener,false);
e.addEventListener(" webkitAnimationIteration",listener,false);
e.className = "slidein";
}
setup();
</script>
</body>
</html>
注释:
webkitAnimationStart 动画开始时触发
webkitAnimationEnd 动画结束时触发
webkitAnimationIteration 动画每迭代一次触发一次该事件
这三种类型的事件对象中都有一个elapsedTime属性,表示距离动画开始已经过去了多少时间