==此事件可以在animation动画重新播放时触发
css
当单击正方形后,开始旋转计数
<style>
*{
margin:0;
padding: 0;
}
#box1{
width: 200px;height: 200px;margin: 0 auto;background-color: #1E90FF;color: #CCCCCC;font-size: 20px;text-align: center;line-height: 200px;
}
/*
* 当给dom元素设置多个transfrom变换时,顺序是从后往前执行
*/
@keyframes move{
from{
transform:scale(1) rotate(0);
}
to{
transform:scale(1.5) rotate(360deg);
}
}
</style>
JS
<script>
/*
* 此事件可以在animation动画重新播放时触发
*/
window.onload=function(){
var count=0;
var box1=document.getElementById('box1');
box1.onclick=function(){
box1.style.animation='move 3s infinite alternate';}
box1.addEventListener('webkitAnimationIteration',function(){
count++;
box1.innerHTML=count;
},false);
}
</script>
<div id="box1">0</div>
动画开始,动画结束时发生的事件
<script>
window.onload=function(){
var box=document.getElementById('box1');
box.onclick=function(){
box.style.animation='move 3s ';
}
/*动画开始*/
box.addEventListener('webkitAnimationStart',function(){
this.innerHTML='show!time!'
},false);*/
/*动画结束*/
box.addEventListener('webkitAnimationEnd',function(){
this.innerHTML='byebye'
},false);
}
</script>