animation-timing-function steps

一般使用animation都是实现线性渐变的动画，比如：

1.位置在固定的时间从起点到终点

2.尺寸在固定的时间线性变换

3.颜色的线性变换等等

如果要实现帧动画效果而不是线性的变化就需要引入steps，即没有过渡的效果，而是一帧帧的变化

steps(x，start / end)

start / end 区别，首先看一个例子：

@keyframes circle{

0% { background:red }

50% { background:yellow }

100% { background:blue }

step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50%  直接就显示了黄色yellow，step-end相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了红色red