transition-timing-function
linear:线性过渡。
ease:平滑过渡。
ease-in:由慢到快。
ease-out:由快到慢。
ease-in-out:由慢到快再到慢。
step-start:等同于 steps(1, start)
step-end:等同于 steps(1, end)
steps接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
start:保留下一帧状态,直到过渡结束
end:保留下一帧状态,直到过渡结束
cubic-bezier:特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内,两两数字组成一个点。可以拉伸(0,0)(0,1)连成的线。
animation-timing-function
所有属性和transition一样
举例
@keyframes change-color{
0%{
background-color: #008c8c;