细说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;}

}

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