css动画@keyframe

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
{
from {top:0px;}
to {top:200px;}
}

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

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

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

以上代码让div元素垂直移动

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

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

语法：@keyframes animationname {keyframes-selector {css-styles;}}

animationname是动画名称，keyframes-selector是动画进行的百分比

*想要不单单只使用from{},to{}的话，可以用百分比表示：如50%{}

 

animation属性

@keyframe仅仅只是定义了一个类似变量一般的东西，要使用它就需要借助animation属性，animation属性有六个属性：

1.animation-name:定义需要绑定到选择器的keyframe名称

2.animation-duration:规定完成动画所花费的时间，以秒或毫秒计

3.animation-timing-function:规定动画的速度曲线

使用名为三次贝塞尔函数的数学函数来规定速度快慢，以下是常用的值：

（1）linear，动画从头到尾的速度是相同的

（2）ease，动画以低速开始，然后加快，在结束前变慢，这是默认值

（3）ease-in，动画以低速开始

（4）ease-out，动画以低速结束

（5）ease-in-out，动画以低速开始和结束

（6）cubic-bezier（n，n，n，n），在三次贝塞尔函数中的自己的值，可能的值是从0到1的值

4.animation-delay:规定动画开始之前的延迟

5.animation-iteration-count:规定动画应该播放的次数，有n和infinite两种参数值，infinite代表动画无限次播放

6.animation-direction:规定是否应该轮流反向播放动画，有两个参数值：normal和alternate，alternate代表轮流反向播放动画

另外其实还有两个属性：

animation-play-state：规定动画是否正在运行或暂停，有两个参数值：running和pause

animation-fill-mode：规定对象动画时间之外的状态