css深入剖析timing-function的step

一、steps

检索或设置对象动画的过渡类型
steps(n,[ start | end ])，默认为end
step-start： 等同于 steps(1, start)
step-end： 等同于 steps(1, end)
例如下列的的动画画关键帧

div{
     
    width: 100px;
    height: 100px;
    animation: run 5s steps(1,end);
}
@keyframes run{
     
    0%{
     
        width: 100px;
        height: 100px;
    }
    20%{
     
        width: 120px;
        height: 120px;
    }
    40%{
     
        width: 140px;
        height: 140px;
    }
    60%{
     
        width: 160px;
        height: 160px;
    }
    80%{
     
        width: 180px;
        height: 180px;
    }
    100%{
     
        width: 200px;
        height: 200px;
    }
}

如上样式，正长情况下我们设置的动画是流畅的变化（过渡性动画），当我们设置step属性时，动画将不会再流畅的变化，而是像“翻页”一样，即忽略（例：0%-20%）之间的过渡动画，将设置的时间分成帧段，按时间（1s）一帧一帧的往后“跳转”（类似setInterval）。

steps(1,end)的1就是（例：0%-20%）之间1s所跳转的帧，如果设置成2，那么之间相当于会增加一次10%{width: 110px;height: 110px;}并在这里进行过渡，值越大，变化会越来越细腻。
steps(1,end)的end就是执行时保留当前帧状态，直到这一段动画结束（0%-20%在帧时间期间保留0%状态），在上例中，动画完毕时100%状态的画面会一闪而过返回初始状态，可利用forwards弥补（如果不循环infinite）
start就是执行时保留下一帧状态，直到这一段动画结束（0%-20%在帧时间期间保留20%状态），在上例中，动画开始时0%状态的画面会一闪而过状态，但是就不好用backwards弥补