如何方便的控制css3动画开始时间点与持续时间

如何方便的控制css3动画开始时间点与持续时间

动画的定义
@keyframes 动画的名字{
0% {left:0px}
100% {left:100px;}
}
@keyframes 动画的名字{
from {left:0px}
to {left:100px;}
}
动画的调用
animation
animation-name 。。。。。。。。动画的名字
animation-duration 。。。。。。动画的时长
animation-timing-function 。。。。动画的速度
ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)
animation-delay 。。。。。。。。动画的延迟
animation-iteration-count (number||infinite) 。。动画的播放次数
动画循环执行的次数，无单位，infinite为无限循环。
animation-direction 。。。。动画播放的方向或者顺序
如果动画循环，循环的方式是：alternate(偶数次向前播放，奇数次向后播放)、normal(每次都向前播放)
animation-play-state 。。。。动画播放的状态
animation-fill-mode 。。。。。动画播放之外的状态
动画的最后（达到100%）时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both。

持续时间：animation-duration:2s; -webkit-animation-duration:2s; 开始时间:animation-delay:2s; -webkit-animation-delay:2s;