css3动画机制原理和实战

这段时间喜欢上css3动画效果了，关于这个每个人都有不同的看法，在我个人看来css3在做一些小页面的动画效果还是很好用的，一些简单的小动画要是用js的话，未免浪费。

要是做大一点的话最好js+css3相结合，这样既有js的高效控制力，也有css3的操作效果。
不多废话了，下面看具体操作吧

首先要了解css3的动画原理和基本操作属性

做过flash或者gif动画的人都知道动画的效果无非就是图片、关键帧和时间动作组成。

首先了解@keyframes 规则（说白了就是css3做动画的一个规定命名）

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

animationname 动画的名字
keyframes-selector动画时长的百分比（0%-100%为有效数值）

css-styles;一个或多个合法的 CSS 样式属性
例子

<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}

@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}

@-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
</style>

然后我们需要了解animation 属性就是css3定义的做动画的东西

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

JavaScript 语法：object.style.animation="mymove 5s infinite"