简单的HTML5+CSS3关键帧动画
现在我们可以用CSS3+HTML5制作吸引眼珠的动画了，为了展现这一特色，我们分析使用CSS3如何制作钟表指针按中心旋转的动画。
本文创建CSS3动画，我们使用了两个重要的CSS3属性
- animation
- @keyframes
注意我们添加-webkit-, -moz-, -ms-, -o-这几个前缀在animation和keyframes前面，分别是几个常用浏览器的兼容写法。
演示地址（其实把下面的代码放到HTML文件中就可以直接运行）
源码下载（其实下面的代码就相当于源码了）
源码：
下面是制作一个圆形背景上钟表旋转的动画源码。接下是代码分析。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple CSS3 Animation</title>
<style>
#rectBox{
width:100px;
height:10px;
background:#666;
position:absolute;
top:200px;
left:200px;
/*Chrome*/
-webkit-animation:colorChange 5s linear .5s infinite;
-webkit-transform-origin:0% 50%;
/*Mozilla*/
-moz-animation:colorChange 5s linear .5s infinite;
-moz-transform-origin:0% 50%;
/*Opera*/
-o-animation:colorChange 5s linear .5s infinite;
-o-transform-origin:0% 50%;
}
#circle{
width:200px;
height:200px;
background:#666;
position:absolute;
top:105px;
left:100px;
border-radius:50%;
}
/*Chrome*/
@-webkit-keyframes colorChange
{
0% {background: red; -webkit-transform: rotate( 0deg );}
50% {background: blue; -webkit-transform: rotate( 180deg );}
100% {background: red; -webkit-transform: rotate( 360deg );}
}
/*Mozilla*/
@-moz-keyframes colorChange
{
0% {background: red; -moz-transform: rotate( 0deg );}
50% {background: blue; -moz-transform: rotate( 180deg );}
100% {background: red; -moz-transform: rotate( 360deg );}
}
/*Opera*/
@-o-keyframes colorChange
{
0% {background: red; -o-transform: rotate( 0deg );}
50% {background: blue; -o-transform: rotate( 180deg );}
100% {background: red; -o-transform: rotate( 360deg );}
}
</style>
</head>
<body>
<div id="circle"></div>
<div id="rectBox"></div>
</body>
</html>
HTML5 & CSS3动画代码分析：
代码的核心是本文上面提到过的CSS3新增的两个属性.
CSS3的animation属性
CSS3的animation属性包含动画和样式。我们可以设置运动和持续时间动画，动画序列随着时间渐进就像关键帧。
CSS3的animation属性还有几个子属性：
animation-name
按规则指定@keyframes的名称来区别动画的关键帧。
animation-duration
设置动画的时长
animation-timing-function
设置动画的关键帧的变化
animation-delay
设置两个关键帧的间隔
animation-iteration-count
设置动画重复次数。 infinite可以实现循环动画（无限重复）。
例如：animation:colorChange 5s linear .5s infinite;
使用CSS3关键帧制作动画：
关键帧用来解析动画元素在时间段内如何渲染动画序列。
我们可以通过它们定义动画的关键帧：
- Percentage
- From to
在本例中我们使用Percentage方法定义关键帧
@-webkit-keyframes colorChange
{
0% {background: red; -webkit-transform: rotate( 0deg );}
50% {background: blue; -webkit-transform: rotate( 180deg );}
100% {background: red; -webkit-transform: rotate( 360deg );}
}
结束语：
以上就是使用HTML5+CSS3 animation属性创建动画的简单方法，如果你有建议或疑问可以去原文下部留言（嘿嘿）。
英文链接：http://www.designscripting.com/2013/03/simple-html5-css3-keyframe-animation/