keyframs动画特效

对于css3的动画特效浏览器的支持各有不同，所以在使用时最好加兼容

对于ie10以上浏览器支持这个动画

火狐需要添加   @-moz-keyframes

谷歌需要添加 @-webkit-keyframes

定义一个动画案例;

(1)先写一个：

                        @-webkit-keyframes change1{
				0%{margin-left:10px;}
				50%{margin-left:50px;}
				100%{margin-left:100px;}
			}
			@-moz-keyframes change1{
				0%{margin-left:10px;}
				50%{margin-left:50px;}
				100%{margin-left:100px;}
			}
			@-o-keyframes change1{
				0%{margin-left:10px;}
				50%{margin-left:50px;}
				100%{margin-left:100px;}
			}
			@-ms-keyframes change1{
				0%{margin-left:10px;}
				50%{margin-left:50px;}
				100%{margin-left:100px;}
			}
			@keyframs change1{
				0%{margin-left:10px;}
				50%{margin-left:50px;}
				100%{margin-left:100px;}
			}

还有一种写法是

@keyframes{
    from{样式。。。。。}
    to{样式。。。。。。}

}

（2）使用：先定义一个.change1{animation:change1 2s 1;}

用js为元素添加一个类名

                <div id="box"></div>
		<script type="text/javascript">
			var oBox = document.getElementById('box');
			oBox.onclick = function(){
				
				this.className= "change1";
				console.log(1);
				
			}
		
		</script>