animation 属性中的 steps

不只是连续的变化才叫动画

并不是只有连续的变化才叫动画，只要有轨迹可循，即使肉眼看上去是断断续续的，实际上也是动画。所以页面中也有种动画叫逐帧动画，只要够快你就是连续的；

动画属性 animation animation:mymove 5s infinite linear; mymove 是动画名称、 5s表示这个动画一次播放5秒、infinite 表示播放的次数为无限次、linear代表在这5秒中动画是匀速播放的；

linear 是animation-timing-function 属性的属性值， 是控制动画速度曲线的、（即在这5秒中，控制这个动画是匀速播放，还是先慢后快，还是跳着播放）；animation-timing-function 有两个方法cubic-bezier() 和 steps() ；

cubic-bezier() 与 steps()

cubic-bezier 指三次贝塞尔曲线，是控制动画逐渐变化的，cubic-bezier可以简写为：

• linear 匀速
• ease 两端慢中间快，开始一直加速到中间位置，达到最大速度，然后减速到速度为0
• ease-in 相对于匀速，开始的时候慢，之后快
• ease-out 相对于匀速，开始时快，结束时候间慢
• ease-in-out 两端慢中间快，开始慢，然后加速到一个速度大概时间到1/3的时候就保持这个速度直到最后1/3时间再均匀减速。

steps 动画不连续，画面是跳跃的，像‘闪现’一样：steps 简化出了step-start和step-end这两个关键字，

• step-start等同于 steps(1, start)
• step-end 等同于 steps(1, end)

理解steps()

steps()语法表示为：steps(number, position)

// 写法
steps(5, end);
steps(2, start);

@keyframes move {
    0% { left: 0; }
    50% { left: 100px; }
    100% { left: 200px; }
}

number：表示把一个变化过程（两个帧之间 即 0% 到 50% 之间为一个变化过程）分为5个更小的过程，即五个段落、五个小区间；五个区间6个节点（6面墙划分出五个房间）

position：有start 和 end 两个值：start表示这个小区间中的后一个节点，end 表示这个小区间中的前一个节点 ，start、end 语意和取值恰好相反；所以我们可以这样理解（个人理解）：

• start 表示从start的下一个值（就是end）开始取这个6个节点中五个节点
• end 表示从end的下一个值（循环之后就是statr）开始取这个6个节点中五个节点

number为5

steps(number, position)

姑且算个结论

// 所以当
animation:mymove 5s infinite steps(2, start）
@keyframes move {
    0% { left: 0; }
    50% { left: 100px; }
    100% { left: 200px; }
}
// 把0% 到50% 就看做2段3个点（0px、50px、100px）取 0px和 50px，
// 把50% 到100% 就看做2段3个点（100px、150px、200px）取 100px和 150px
// 最终动画的效果为 元素一次跳跃的出现在 0px、50px、100px、150px这些点上

//steps(1, start) 就更简单 0% 到 50% 原本就是一个区间 直接取第一个0px 就好

参考 作者： CSS3 animation属性中的steps功能符深入介绍（张鑫旭）
连接：https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/