CSS3动画在Style里面就实现了以往我们用JQ写的动画效果，着实简便了不少~
简单Demo：
html代码:
<div id="dv1"></div>
CSS3代码:
<style type="text/css">
#dv1{width:100px;height:100px;border:1px solid blue;-webkit-animation:myfirst 3s;position:relative;}
@webkit-keyframes{
0%{left:0px;top:0px;}
25%{left:200px;top:0px;}
50%{left:200px;top:200px;}
75%{left:0px;top:200px;}
100%{left:0px;top:0px;}
}
</style>
--------------------下面演示一个让圆持续旋转的Demo
代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#dv1{
width:100px;height:100px;border:100px solid green;
border-left-color:yellow;border-top-color:red;border-bottom-color:blue;
border-radius:50%;
-webkit-animation:myAnimation 3s infinite linear;
}
@-webkit-keyframes myAnimation{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div id="dv1"></div>
</body>
</html>
原文：http://www.cnblogs.com/shuai7boy/p/5467113.html