animation和@keyframes属性

animation-name 属性为 @keyframes 动画指定名称。

例如：
animation-name：myname；
@keyframes myname{
from{}
to{}
}
这里animation的name要和@keyframes的name相同，否则动作效果不生效

animation-duration属性定义动画完成一个动作需要的时间以秒为单位

例如：
方块从坐标0,0到0,500，向右移动了500px，设定移动需要5s
演示地址：http://www.atynote.com/webstudy/animation-duration.html
animation-name：mymove；
animation-duration：5s；
@keyframes mymove{
from{top:0;left:0;}
to{top:0;left:500}
}

.box{
width: 90px;
height: 90px;
position: relative;
background: orange;
animation-name: mymove;
animation-duration: 5s;
}
@keyframes mymove{
from{top:0;left: 0;}
to{top:0;left: 500px;}
}

animation-timing-function指定动画将如何完成一个周期的动作

演示地址：http://www.atynote.com/webstudy/animation-timing-function.html
格式：animation-timing-function：移动效果；
linear
动画从头到尾的速度是相同的。
ease
默认。动画以低速开始，然后加快，在结束前变慢。
ease-in
动画以低速开始。
ease-out
动画以低速结束。
ease-in-out
动画以低速开始和结束。
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay在动画开始前的等待效果

演示地址：http://www.atynote.com/webstudy/animation-delay.html
格式： animation-delay：等待时间；

animation-iteration-count定义动画重复的次数

演示地址：http://www.atynote.com/webstudy/animation-iteration-count.html
格式：animation-iteration-count：重复次数；
n
一个数字，定义应该播放多少次动画
infinite
指定动画应该播放无限次（永远）

animation-play-state控制动画的暂停和播放

演示地址：http://www.atynote.com/webstudy/animation-play-state.html
格式：
animation-play-state: paused|running;
css代码：

            .box{
                width: 90px;
                height: 90px;
                position: relative;
                background: orange;
                animation-name: mymove;
                animation-duration: 5s;
                animation-timing-function: linear;
                animation-iteration-count:2;
                animation-iteration-count: infinite;
                }
            @keyframes mymove{
                from{left: 0;}
                to{left: 1500px;}
            }
            .input1{position: absolute;top: 20%;left: 45%;}
            .input2{position: absolute;top: 20%;left: 50%;}

js代码：

    function stop(){
                document.getElementById("box").style.animationPlayState="paused";
            }
            function start(){
                document.getElementById("box").style.animationPlayState="running";
            }