标题：animation-timing-function
简介
animation-timing-function
语法：
animation-timing-function：linear | ease | ease-in | ease-out || ease-in-out | steps( <interval_number> [, start | end ]) | step-start | step-end ]| cubic-bezier(, , , ) [ , linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) | steps( <interval_number> [, start | end ]) | step-start | step-end ]]*
默认值：ease
取值：
linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(, , , )：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
step-start：
马上转跳到动画结束状态。
step-end：
保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。
steps(<number>[, [ start | end ] ]?)：
第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。
说明：
检索或设置对象动画的过渡类型
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationTimingFunction。
写法：
内核类型写法
Webkit(Chrome/Safari)-webkit-animation-timing-function
Gecko(Firefox)-moz-animation-timing-function
Presto(Opera)
Trident(IE)-ms-animation-timing-function
W3Canimation-timing-function
示例
h1 {
font - size: 16px;
}
div {
width: 60px;
height: 60px;
margin: 200px 0 0 50px;
padding: 10px;
border - radius: 41px;
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
background: #F6D66E;
background: -moz - linear - gradient(top, #fff, #F6D66E);
background: -webkit - linear - gradient(top, #fff, #F6D66E);
background: -o - linear - gradient(top, #fff, #F6D66E);
background: -ms - linear - gradient(top, #fff, #F6D66E);
background: linear - gradient(top, #fff, #F6D66E); - moz - animation: animations 4s linear infinite; - webkit - animation: animations 4s linear infinite; - o - animation: animations 4s linear infinite; - ms - animation: animations 4s linear infinite;
animation: animations 4s linear infinite;
}@ - webkit - keyframes animations {
0 % { - webkit - transform: translate(0, 0);
}
12 % { - webkit - transform: translate(80px, -25px);
}
25 % { - webkit - transform: translate(200px, -50px);
}
38 % { - webkit - transform: translate(320px, -25px);
}
50 % { - webkit - transform: translate(400px, 0);
}
62 % { - webkit - transform: translate(320px, 25px);
}
75 % { - webkit - transform: translate(200px, 50px);
}
87 % { - webkit - transform: translate(80px, 25px);
}
100 % { - webkit - transform: translate(0, 0);
}
}@ - moz - keyframes animations {
0 % { - moz - transform: translate(0, 0);
}
12 % { - moz - transform: translate(80px, -25px);
}
25 % { - moz - transform: translate(200px, -50px);
}
38 % { - moz - transform: translate(320px, -25px);
}
50 % { - moz - transform: translate(400px, 0);
}
62 % { - moz - transform: translate(320px, 25px);
}
75 % { - moz - transform: translate(200px, 50px);
}
87 % { - moz - transform: translate(80px, 25px);
}
100 % { - moz - transform: translate(0, 0);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, 0);
}
12 % { - o - transform: translate(80px, -25px);
}
25 % { - o - transform: translate(200px, -50px);
}
38 % { - o - transform: translate(320px, -25px);
}
50 % { - o - transform: translate(400px, 0);
}
62 % { - o - transform: translate(320px, 25px);
}
75 % { - o - transform: translate(200px, 50px);
}
87 % { - o - transform: translate(80px, 25px);
}
100 % { - o - transform: translate(0, 0);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, 0);
}
12 % { - ms - transform: translate(80px, -25px);
}
25 % { - ms - transform: translate(200px, -50px);
}
38 % { - ms - transform: translate(320px, -25px);
}
50 % { - ms - transform: translate(400px, 0);
}
62 % { - ms - transform: translate(320px, 25px);
}
75 % { - ms - transform: translate(200px, 50px);
}
87 % { - ms - transform: translate(80px, 25px);
}
100 % { - ms - transform: translate(0, 0);
}
}@keyframes animations {
0 % {
transform: translate(0, 0);
}
12 % {
transform: translate(80px, -25px);
}
25 % {
transform: translate(200px, -50px);
}
38 % {
transform: translate(320px, -25px);
}
50 % {
transform: translate(400px, 0);
}
62 % {
transform: translate(320px, 25px);
}
75 % {
transform: translate(200px, 50px);
}
87 % {
transform: translate(80px, 25px);
}
100 % {
transform: translate(0, 0);
}
}线性运动的太阳（您还可以定义其它的动画过渡类型，如ease - in,
ease - out,step-start等）：abc[1]