css3 复杂动画，多次动画，单次运动，动画只运动一次执行一次（animation）

//无限循环运行
.box{ 
-webkit-animation:name 0.6s linear 0s normal none infinite;
animation:name 0.6s linear 0s normal none infinite;
 }
//单次运行
.box{ 
-webkit-animation:name 0.6s linear 0s normal 1 forwards;
animation:name 0.6s linear 0s normal 1 forwards;
 }

@-webkit-keyframes name{0%{ opacity:0; }100% { opacity:1; }}
@keyframes name{0%{ opacity:0; }100% { opacity:1; }}

//animation: name duration timing-function delay iteration-count direction;
值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

//animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
值	描述	
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。	
ease-out	动画以低速结束。	
ease-in-out	动画以低速开始和结束。	
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。