css3动画设置
1、首先了解语法：添加语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
此语法为缩写。
每个属性也可单独来写。
2、属性说明：
animation-name：指定要绑定到选择器的关键帧的名称。
这个属性是你说要绑定的动画名称，一般新建一个动画则需需要添加,名字；
例：animation-name：myAnimate;
3、animation-duration：动画指定需要多少秒或毫秒完成。
例：animation-duration:2s;
4、animation-timing-function：设置动画以什么方式完成一个周期。
例：animation-timing-function：linear;
可选属性：
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
5、animation-delay：设置动画在启动前的延迟间隔。
例：animation-delay:2s;
6、animation-iteration-count：定义动画的播放次数。
例：animation-iteration-count:3;
可选属性：
n一个数字，定义应该播放多少次动画测试 »
infinite指定动画应该播放无限次（永远）
7、animation-direction：指定是否应该轮流反向播放动画。
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
例：animation-direction:alternate;
可选属性：
normal默认值。动画按正常播放。
reverse动画反向播放。
alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
8、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式，把物体动画地从一个地方移动到另一个地方，并让它停留在那里，即保持动画完成时设定的位置。
例：animation-fill-mode:forwards;
可选属性：
none默认值。执行后回到原地。
forwards在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
9、animation-play-state：指定动画是否正在运行或已暂停。
例：animation-play-state:paused;
可选属性：
paused指定暂停动画测试 »
running指定正在运行的动画
10、上面是设定动画的运行的方式。
还要配合@keyframes 。
例
//myAnimate 即上面的动画名称，和animation-name保持一致
@keyframes myAnimate ｛
form{top:100px;}
to{ top:200px;}
｝
意思为动画从top100px位移到top200px;
还可以写为
@keyframes myAnimate ｛
0%{top:100px;}
100%{ top:200px;}
｝
当使用百分比，就可以设定详细的步骤。比如
@keyframes myAnimate ｛
0%{top:100px;background:red;}
10%{left:100px;width:300px;}
23%{right:130px;height:250px;}
68%{bottom:100px;}
100%{ top:200px;}
｝
百分比大括号内写，在指定步骤内css的样式。
11、所有属性的例子：
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */-
webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
同时可写为
div{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;}
//结合keyframes 就完成一个兼容所有支持css3动画的一个小动画
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}