如何理解 CSS step 函数中的 jump-* 关键词?

欢迎关注我的公众号:前端侦探

之前在这篇文章中:CSS 实现 Ant Design官网Logo彩蛋效果实现了一个鼠标 hover 效果,如下

如何理解 CSS step 函数中的 jump-* 关键词?

原理其实很简单,就是一个 CSS 动画,使用的是steps阶梯函数,不断改变background-position

.logo{
  animation: random 1s steps(10) infinite;
}
@keyframes random {
  to {
    background-position: 100%;
  }
}

里面用到的小图标是这样一张图片(11个小图标)

如何理解 CSS step 函数中的 jump-* 关键词?

乍一看,动画好像非常完美,其实还是有一个小小的缺陷,仔细观察,最后一个图标(点赞图标)一直没有出现过,直接被跳过了,文章评论中也有人提到并给出解决方案

如何理解 CSS step 函数中的 jump-* 关键词?

但是这种方式不太稳定,background-potion需要考虑实际的帧数,也就是需要根据steps的步数改变。

除了这种方式,其实还有更好的解决方案,今天就一起来探讨这个问题

一、问题重现

为了方便观察和演示,这里用1、2、3来做一张序列帧图片,如下

如何理解 CSS step 函数中的 jump-* 关键词?

然后通过 steps阶梯函数实现序列帧动画,关键实现如下

div{
  animation: random 1s steps(2) infinite;
}
@keyframes random {
  to {
    background-position: 100%;
  }
}

效果是这样的(丢失了最后一帧)

如何理解 CSS step 函数中的 jump-* 关键词?

为啥这里明明有 3 帧,却要设置steps的次数为 2 ?我们不妨设置为 3 试试

animation: random 1s steps(3) infinite;

效果如下

如何理解 CSS step 函数中的 jump-* 关键词?

情况就更加糟糕了,而且并不是按照123的边界变化的,还出现了中间过渡状态,显然不是我们想要的效果。

要搞清楚这个问题,需要理解steps函数中的第 2 个参数,继续往下看。

二、 steps 中的首尾帧忽略规则

steps其实有两个参数,官方语法如下

steps( <integer> [, <step-position> ]? )  

现在再来看前面的写法

steps(2)

这其实是一个简写,等同于

steps(2, end)

这是什么意思呢,end表示结束,也就是忽略最后一帧,所以上面的例子中,虽然有 3 帧,但忽略最后一帧后就只有 2 帧了,如下

如何理解 CSS step 函数中的 jump-* 关键词?

在动画中就是这样,1→2→1→2...

如何理解 CSS step 函数中的 jump-* 关键词?

所以,steps(2)表示将原图片分成 3 帧,但是只运行前面 2 帧,最后一帧跳过。

那么,上面的steps(3)也很好理解了吧,将原图片平均分成了 4 份,所以就出现了中间过渡状态

如何理解 CSS step 函数中的 jump-* 关键词?

除了end以外,还有一个start

steps(2, start)

start表示开始,也就是忽略最前面的一帧

如何理解 CSS step 函数中的 jump-* 关键词?

在动画中就是这样,2→3→2→3...

如何理解 CSS step 函数中的 jump-* 关键词?

所以,steps(2,start)表示将原图片分成 3 帧,但是只运行后面 2 帧,跳过了第一帧。

那么,有没有办法分成多少帧就运行多少帧呢?当然也是有的,就是后来更新的jump-*关键词

三、steps 中jumb-*关键词

Chrome 77+开始,steps支持了几个以jumb-开头的关键词,分别是

  • jump-start,等同于之前的start,表示跳过第一帧
  • jump-end,等同于之前的end,表示跳过最后一帧
  • jump-both,表示跳过第一帧和最后一帧
  • jump-none,表示都不跳过

下面是官方的一个函数图像(每个实心点表示一帧)

如何理解 CSS step 函数中的 jump-* 关键词?

其实我还是比较习惯于用跳过来理解,前面两个就不说了,先看jumb-both

steps(1, jump-both)

去除首尾两帧后,就只剩下中间一帧了,示意如下

如何理解 CSS step 函数中的 jump-* 关键词?

最后的动画效果也只有中间一帧了,2→2→2→2...

如何理解 CSS step 函数中的 jump-* 关键词?

然后是jump-none

steps(3, jump-none)

表示不跳过,有多少帧就运行多少帧

如何理解 CSS step 函数中的 jump-* 关键词?

动画效果就是正常的123依次变化,1→2→3→1→2→3...

如何理解 CSS step 函数中的 jump-* 关键词?

根据这个原理,文章开头的小缺陷就非常好解决了,将steps(10)改为steps(11, jump-none)即可

.logo{
  animation: random 1s steps(11, jump-none) infinite;
}
@keyframes random {
  to {
    background-position: 100%;
  }
}

这样就可以正常的看到最后一个图标了

如何理解 CSS step 函数中的 jump-* 关键词?

你也可以访问以下任意链接:

之前的效果(注意对比观察最后一个点赞图标)

四、最后总结一下

其实这个特性也已经出来好几年了,但是好像很少有人知道,主要原因是这个特性使用场景不太丰富,并且有替代方案,再者,这个特性是旧属性的补充,导致在文档上不易轻易被发现(我也是无意发现的😂)。兼容性方面,Safari还是有些拉胯,需要14+才行,完整兼容性如下:

如何理解 CSS step 函数中的 jump-* 关键词?

下面再来回顾一下jump-*的区别

  1. jump-start,等同于之前的start,表示跳过第一帧
  2. jump-end,等同于之前的end,表示跳过最后一帧
  3. jump-both,表示跳过第一帧和最后一帧
  4. jump-none,表示都不跳过,有多少帧就运行多少帧

最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤

欢迎关注我的公众号:前端侦探

原文链接:https://juejin.cn/post/7245975053233700924 作者:XboxYan

(0)
上一篇 2023年6月19日 上午10:26
下一篇 2023年6月19日 上午10:37

相关推荐

发表回复

登录后才能评论