细说css3中的animation和keyframe

总结用法如下：
transform-style: preserve-3d; //设置3d效果。
animation-name:xiaozhe; //设置动画名为xiaozhe。
animation-duration：7s；//设置动画持续时间为7s。
animation-iteration-count: infinite;//指定动画无限循环，也可以设置具体的循环次数number。
animation-timing-function：linear; //设置匀速运动，也可是设置
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
上面可以简写为：animation:xiaozhe 7s infinite linear;

@keyframe xiaozhe{
from{}
to{}
}

语法：
@keyframes 动画名称 {
关键影格选择器1 { 众多css样式; }
关键影格选择器2 { 众多css样式; }
…
}

也可以这样表示：（与from to一样）
@keyframes xiaozhe
{
0% { margin-top: 0px; background-color: yellow;}
50% { margin-top: 50px; background-color: red; }
100% { margin-top: 100px; background-color: blue; }
}

小练习：



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

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;background: red;width: 100px;height: 100px;}
50%{top:100px;background: blue;width: 300px;height: 50px;}
100% {top:200px;background: yellow;width: 440px;height: 440px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}

小哲：喜欢你喜欢你喜欢你