本文详细介绍了CSS中steps()函数的工作原理，特别是参数arg1和arg2的影响。通过示例展示了end值如何在动画周期末尾赋值，导致最后一阶段无法显示，以及解决这个问题的两种方法。同时对比了start值的情况，指出start不会包含从0%到第一次赋值的阶段。
step(arg1,arg2)
arg1:是一个数字表示动画的状态从0%到100%经历多少步。
arg2：值可以为start或end,默认为end。
情形1：end表示在一个周期的结尾赋值，当值为end时会由默认状态0%到第一次变更值作为第一步，并忽略掉最后一步。
该过程分为以下几个阶段:
第一阶段：默认状态到第一次赋值之前(不显示文字，此时的width大小为0)
第二阶段：第一次赋值到第二次赋值之前(显示"前"，此时的width大小为20px)
第三阶段:第二次赋值到第三次赋值之前(显示"前端"，此时的width大小为40px)
第四阶段:第三次赋值到第四次赋值之前(显示"前端学"，此时的width大小为60px)
第五阶段:此时本该发生第四次赋值，但是由于step的第二个参数为end所以赋值的时间处于时间轴的结束位置，没有时长来承载第五个阶段，所以就直接结束了而没有表现出来。
QQ录屏20200908135724
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
最低0.47元/天 解锁文章
1178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
