animation-timing-function
animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS
样式变为另一套所用的时间。在平常的取值中,主要有以下几个:
值
描述
linear
动画从头到尾的速度是相同的。
ease
默认。动画以低速开始,然后加快,在结束前变慢。
ease-in
动画以低速开始。
ease-out
动画以低速结束。
ease-in-out
动画以低速开始和结束。
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
在这个表中,还有几个属性是没有列出来的,即step-end,step-start,steps(),他们是以一帧一帧的显示动画,这在部分动画中有着重要的意义。三个值的属性各不同,先看示例:
linear:
step-start:
step-end:
steps(3,start):
代码:
@-webkit-keyframes changeColor{from,to{background:red;}20%{background:blue;}60%{background:black;}}
#animation_show div{width:100px;height:100px;display:inline-block;
}
linear:
step-start: