一般使用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
