JS与动画相关的事件：webkitAnimationIteration/webkitAnimationStart/webkitAnimationEnd

==此事件可以在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>