炫意html5
中国最早CSS3和HTML5移动开发技术网站之一

简单的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/

炫意HTML5 » 简单的HTML5+CSS3关键帧动画

分享到:更多 ()

html5游戏css3教程