css3.0动画
一般做动画都使用javascript中的setTimeout()和setInterval()2个函数来制作。现在可以使用css3中的动画来制作动画了，而且css3.0中的动画使用了GPU来加速会让动画看起来更加平滑，顺畅。由于css3.0中的动画并不是所有浏览器都支持，因此会有这样的写法:@-moz-keyframes 动画名、@-webkit-keyframes 动画名 、@-o-keyframes 动画名、@-ms-keyframes 动画名.
css3.0动画浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
下面创建一个让div从左到右再回到左边的动画例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box{border:1px solid #000; width:1200px; height:500px; position:relative;}
#move{position:absolute; left:0; top:100px; width:100px; height:100px; background-color:#900; -webkit-animation:moveLeft 1s 3;-ms-animation:moveLeft 1s 3;-o-animation:moveLeft 1s 3;animation:moveLeft 1s 3;}
@keyframes moveLeft
{
0% {left:0px;}
25% {left:100px;}
50% {left:200px;}
100% {left:300px;}
}
@-moz-keyframes moveLeft /* Firefox */
{
0% {left:0px;}
25% {left:100px;}
50% {left:200px;}
100% {left:300px;}
}
@-webkit-keyframes moveLeft /* Safari 和 Chrome */
{
0% {left:0px;}
25% {left:100px;}
50% {left:200px;}
100% {left:300px;}
}
@-o-keyframes moveLeft /* Opera */
{
0% {left:0px;}
25% {left:100px;}
50% {left:200px;}
100% {left:300px;}
}
</style>
</head>
<body>
<div id="box">
<div id="move"></div>
</div>
</body>
</html>
首先创建一个moveLeft的动画.
在要引用的元素的css里面增加 -webkit-animation:moveLeft 1s 3;-ms-animation:moveLeft 1s 3;-o-animation:moveLeft 1s 3;animation:moveLeft 1s 3;
animation: myfirst 5s linear 2s infinite alternate;
animation:动画名 动画缓动时间 动画方式 动画时间 执行次数 动画方向；
