animation属性中的steps功能符深入介绍

1、animation属性中的steps功能符深入介绍一、不只是延续的变幻才叫动画我很早的时候有个错误认知，认为惟独延续的变幻才叫动画；含笑半步癫那样的效果不是动画。后来才明了，只要有轨迹可循，即使肉眼看上去是断断续续的，事实上也是动画。举个例子，现有素材图如下：请问下面两个图形变幻，哪个属于动画效果？答案是：两个都是。我们假如换一种素材，大家就能知道非延续图形变幻也是动画了。效果分离为延续旋转和断续旋转。后面一张图就是非延续变幻下的效果，反而是我们实际项目中正确的菊花loading效果。而实现的关键就是本文要深化介绍的steps()功能符。二、一句话介绍steps()功能符steps()功能符可

2、以让动画不延续。三、steps()在css3 animation中地位steps()功能符和css3 animation中的cubic-bezier()功能符的地位和作用是一样的，都可以作为animation-timing-function的属性值。只不过steps()更像是楼梯坡道，cubic-bezier()更像是无障碍坡道。如下图暗示：然后steps()简化出了step-start和step-end这两个关键字；cubic-bezier()则有linear，ease，ease-in，ease-out以及ease-in-out。cubic-bezier指三次贝塞尔曲线，详细可参见我之前文章

3、深度把握svg路径path的贝塞尔曲线命令。steps()指逐步运动，下面进一步深化介绍。四、搞清晰steps()中的start和endsteps()有一定的学习难度，总是搞不清晰，最主要就是start和end傻傻分不清晰。我这里自我挑战下，看看能不能说清晰。常见steps()使用举例：steps(5, end);steps(2, start);用steps()语法表示就是：steps(number, position)其中：number数值。这个很好理解，表示把我们的动画分成了多少段。 假设有如下css3动画keyframes，定义了一段从0100px的位移：keyframes move 0

4、% left: 0; 100% left: 100px; 假设我们的number值是5，则相当于把这段移动距离分成了5段，如下暗示图：position关键字。表示动画是从时光段的开始延续还是末尾延续。支持start和end两个关键字，含义分离如下： start：表示挺直开头。 end：表示戛然而止。是默认值。 为什么position十分难理解？我认为两个缘由： steps()属于timing function，也就是时光函数，时光这个东西是虚的，看不见，摸不着，联想乏力，所以认知成本高。这也是为什么那么多人都不珍惜时光的缘由——无法感知。 css规范中对

5、于start和end的定义是基于数学函数来的，函数这东西，多少人的噩梦，由于过于抽象，与现实难以关联，所以，假如我们盯着定义去理解start和end，那就是死胡同，不归路，就算现在弄懂了，过段时光再碰到，得了，全忘光光了，函数图哪个是哪个，鬼才记得。下面这张图就出自规范文档： 根据规范图再细化说明就是： start：表示挺直开头。也就是时光才开头，就已经执行了一个距离段。于是，动画执行的5个分段点是下面这5个，起始点被忽视，由于时光一开头挺直就到了其次个点： end：表示戛然而止。也就是时光一结束，当前距离位移就停止。于是，动画执行的5个分段点是下面这5个，结束点被忽视，由于等要执行结束点的时

6、候已经没时光了： 基于现实感知重新理解position！万物具有相对性。例如，苍蝇眼中的人类动作都是慢动作，但是人类眼中的苍蝇却十分灵敏。同样的，start和end这里的开头和结束是相对于时光而言的，但是，假如站在人类可感知的详细事物而言，start和end却是相反的含义。所以，我们可以这么理解： start：表示结束。分段结束的时候，时光才开头走。于是，动画执行的5个分段点是后5个点： end：表示开头。分段开头的时候，时光跟着一起走。于是，动画执行的5个分段点是前5个点： 记住position参数的含义铭记这么一句话：一切都是反的！start不是开头，而是结束；end不是结束，而是开头。五

7、、step-start和step-endstep-start和step-end是steps()功能符简化关键字，注重，是step-*，step，后面没有s。其中，step-start等同于steps(1, start)，step-end等同于steps(1, end)或者steps(1)。step-start和step-end用中文短句解读就是：一步到位和延迟到位，在实际项目中有什么作用呢？对于惟独0%,100%或from, to两个关键时光帧的动画，step-start和step-end是没有任何需要用法的理由的。假如是非等分，无法过渡的阶梯动画，则有用法价值，例如下面这个基于box-sha

8、dow实现的打点动画效果：订单提交中实现核心代码如下（此打点办法最多排纯css打点动画第3位，更多见此文介绍和指引）：订单提交中.dotting display: inline-block; min-width: 2px; min-height: 2px; margin-right: 8px; box-shadow: 2px 0, 6px 0, 10px 0; animation: dot 4s infinite step-start both; keyframes dot 25% box-shadow: none; /* 0个点 */ 50% box-shadow: 2px 0; /* 1个

9、点 */ 75% box-shadow: 2px 0, 6px 0; /* 2个点 */ 六、steps()与填充模式animation-fill-modeanimation-fill-mode有时候也会影响steps()的断点表现，例如下面这个语句：animation: move 5s forwards steps(5, end);动画只执行一次，由于没有设置infinite无限循环，而forwards虽然表示前，但同样和现实表现是反的，也就是动画结束时候元素保持动画关键帧最后的状态。于是，下面6个分段点都会执行，囫囵动画停止在第6个分段点上。这明显不是我们想要的，怎么处理呢？可以消减分段个数和动画运动的跨度，调节如下：keyframes move 0% left: 0; 100% left: 80px; 也就是本来尽头100px改成80px，同时css调用改成：animation: move 5s forwards steps(4, end);也就是本来steps(5, end)改成steps(4, end)，最后100%这一帧交给forwards即可！七、结束语steps()是一个用得比较多的功能符，除了本文展示的loading效果，在逐帧动画中用得十分多。例如，一些不太复杂的