CSS | steps 的内心探索之路

最新推荐文章于 2024-06-30 09:56:50 发布

微也的web

最新推荐文章于 2024-06-30 09:56:50 发布

阅读量600

点赞数

分类专栏： web css

web 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

“我要一步一步往前跳，在最远方乘着web往前飞；
小小的天……我有属于我的天”
——题记，改编源自《蜗牛》

正文

当我们给元素做动画的时候，可能会用到steps，把多个图片拼合成一张雪碧图，改变background-position进行动画，简便而又强大的属性。如同变形金刚，“卡卡卡”，而有时又被它搞得一愣一愣的，咦，咋没看到最后一张图。用归用，不由疑惑steps到底是个什么鬼？索性来了解一下。

语法

steps(number, direction)
//number指间隔数，必须为正整数，必选
//directoin接受start和end值，指定在每个间隔的起点或是终点发生阶跃变化，默认end，可选

steps作为timing-function的一个属性，将操作的区域划分为相同等分的间隔，也就是说每步分成n段，注意，这里是步，不是共。比如说0，50%，100%，则会0~50%分成n步，50%~100%分成n步。上2张W3C上对于steps图文并茂的介绍：

w3c关于steps的介绍文字

w3c关于steps的介绍图例

可能我们看了还是不太清楚，直接上例子：
比如说小鸟啄地的3帧动画，用steps实现，改变background-position切换。

原图.png

看代码：

代码

steps(2, start)效果如下，仅在鸟2鸟3中切换（鸟1咋不见了）：

鸟2.png

鸟3.png

而steps(2,end)或者steps(2)，仅在鸟1鸟2中切换（鸟3咋不见了）：

鸟1

鸟2.png

（代码放在了codepen上，可远观可亵玩，看看是不是我说的这个事儿。）

为啥，我们以w3c的线图来解读。

steps(2, start)

因为只有一个100%，steps 的2将该动画分成2步，当选择start时，也就是刚开始的时候0s一跳跳到1，相当于作为一个跃点，完成阶跃，这一切来的那么快，以至于我看不见，所以我们看到的就是鸟2鸟3不断切换。

接下来切换end：

steps(2, end)

当跃点为end时，则动画在终点发生阶跃，也就是说最后一步的最后一点，这一瞬间猝不及防，致使我啥也都看不见。steps的默认状态是end。这也就导致平时我们可能会产生这样的错觉：它不会运行到最后一张，事实上是有，但阶跃的我压根看不到。但是，我们可以利用forwards来查看，发现它最后定的图是鸟3，如果infinite无限循环，鸟3的毛还是看不到的。

解决方法
方法1：在多张图片拼合的成果图（雪碧图）的末尾或开头处再加一张一样大小的空白图，如此便解决了。有时候可能加跟第一张或第一张一样的图，具体问题具体分析~
方法2：图还是原始图，改变动画keyframes，需要多加一步50%。

@-webkit-keyframes stepsA {
    50% { background-position: 0 100%; }

    to { background-position: 0 0; }
    /*to { background-position: 0 100%; }*/
}

猜想：
step-start， start-end显示的是啥？
step-start = start(1, start)
step-end = start(1, end)