上述例子我们将 4s 动画分成 4 个周期，方块会在每个周期起始点也就是 0s ，1s ，2s ，3s 处发生位移，从上述效果图我们也可以看出，在我点击刷新瞬间就完成了一次状态变化，然后在 3s 后达到终点，在终点待了 1s 到动画结束，回到起始位置。
再来看 end 分成多段的情况：
div {
width: 100px;
height: 100px;
background-color: red;
animation: move 4s steps(4, end);
}效果如下：
指定 end 会使动画状态在每个周期的结束点发生变化，对应例子就是在 1s ，2s ，3s ，4s 处发生变化。从上述效果图我们也可以看出方块在我点击刷新的 1s 后开始运动，在 4s 方块移动到终点的瞬间由于动画结束的原因又移动到起始位置，所以会产生方块好像没有移动到终点的错觉。
总结
以上所述是小编给大家介绍的CSS3 animation – steps 函数详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
