前端开发，CSS3动画代码高频知识点

与transition十分相像，属性略有差异，下面来看看她有哪些属性

• animation-name keyframeName（动画过渡的css属性，只是不过这个是自己定义的keyframe）
• animation-duration动画所花费的时间（同转换）
• animation-timing-function速度曲线（同过渡）
• animation-delay动画开始前的延迟（同转换）
• animation-iteration-count动画播放的次数
• animation-direction动画播放的方向

动画持续时间动画计时功能动画延迟这三个属性与transition类似，忽略这块。

动画名称

div
{
animation-name:mymove;
animation-duration:5s;
animation-name:mymove;
animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

如上面的例子可知animation-name是可以任意名称。这个名称用关键帧来定义

@Keyframes中的样式规则是由多个百分比构成的，如“ 0％”到“ 100％”之间，可创建多个百分比

例子中“从”“到”代表“ 0％”到“ 100％”

注意0％不能省略％

@Keyframe的语法综合起来如下

@keyframes yourMoveName {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式：
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}

yourMoveName：就是duration-name所要用到值，随便取，语义化更好

百分比：百分之，可添加多个这样的百分值

属性：css属性名，左侧，背景

值：就是响应的属性值

注意！animation目前只支持webkei内核的浏览器，所以需要在上面的基础上加上-webket前缀

div
{
animation-name:mymove;
animation-duration:5s;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}

动画迭代次数

transition是触发后发生的一次动画，

animation动画如flash，可重复播放，得设置animation-iteration-count属性，自定义次数，infinite为无限次

动画方向

指定动画播放的方向，默认值是noraml，另一个值alterante是反向的意思。偶数次反向执行动画

div
{
width:100px;
height:100px;
animation:myfirst 5s 5 alternate;
-moz-animation:myfirst 5s 5 alternate; /* Firefox */
-webkit-animation:myfirst 5s 5 alternate; /* Safari and Chrome */
-o-animation:myfirst 5s 5 alternate; /* Opera */
}
@keyframes myfirst
{
0%   left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {; left:200px; top:200px;}
75%  {en; left:0px; top:200px;}
100% {left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {; left:200px; top:200px;}
75%  {en; left:0px; top:200px;}
100% {left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {; left:200px; top:200px;}
75%  {en; left:0px; top:200px;}
100% {left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0%   left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {; left:200px; top:200px;}
75%  {en; left:0px; top:200px;}
100% {left:0px; top:0px;}
}

例子演示效果：http://www.zzfriend.com/demo/css3/lizi.html

兼容性

针对低版本的浏览器最好使用-webket-，-moz，-o -.- ms-

关于低版本的IE，动画建议使用JS处理，css3不要勉强。