乐趣区

关于前端:如何理解-CSS-step-函数中的-jump-关键词

jiezi

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

原理其实很简略，就是一个 CSS 动画，应用的是 steps 阶梯函数，一直扭转background-position

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

外面用到的小图标是这样一张图片（11 个小图标）

乍一看，动画如同十分完满，其实还是有一个小小的缺点，仔细观察，最初一个图标（点赞图标）始终没有呈现过，间接被跳过了，文章评论中也有人提到并给出解决方案

然而这种形式不太稳固，background-potion须要思考理论的帧数，也就是须要依据 steps 的步数扭转。

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

一、问题重现

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

而后通过 steps阶梯函数实现序列帧动画，要害实现如下

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

成果是这样的（失落了最初一帧）

为啥这里明明有 3 帧，却要设置 steps 的次数为 2？咱们无妨设置为 3 试试

animation: random 1s steps(3) infinite;

成果如下

状况就更加蹩脚了，而且并不是依照 1、2、3 的边界变动的，还呈现了两头过渡状态，显然不是咱们想要的成果。

要搞清楚这个问题，须要了解 steps 函数中的第 2 个参数，持续往下看。

二、steps 中的首尾帧疏忽规定

steps其实有两个参数，官网语法如下

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

当初再来看后面的写法

steps(2)

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

steps(2, end)

这是什么意思呢，end示意完结，也就是 疏忽最初一帧，所以下面的例子中，尽管有 3 帧，但疏忽最初一帧后就只有 2 帧了，如下

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

所以，steps(2)示意将原图片分成 3 帧，然而只运行后面 2 帧，最初一帧跳过。

那么，下面的 steps(3) 也很好了解了吧，将原图片均匀分成了 4 份，所以就呈现了两头过渡状态

除了 end 以外，还有一个start

steps(2, start)

start示意开始，也就是疏忽最后面的一帧

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

所以，steps(2,start)示意将原图片分成 3 帧，然而只运行前面 2 帧，跳过了第一帧。

那么，有没有方法分成多少帧就运行多少帧呢？当然也是有的，就是起初更新的 jump-* 关键词

三、steps 中 jumb-* 关键词

从 Chrome 77+开始，steps反对了几个以 jumb- 结尾的关键词，别离是

  • jump-start，等同于之前的 start，示意 跳过第一帧
  • jump-end，等同于之前的 end，示意 跳过最初一帧
  • jump-both，示意 跳过第一帧和最初一帧
  • jump-none，示意 都不跳过

上面是官网的一个函数图像（每个实心点示意一帧）

其实我还是比拟习惯于用跳过来了解，后面两个就不说了，先看jumb-both

steps(1, jump-both)

去除首尾两帧后，就只剩下两头一帧了，示意如下

最初的动画成果也只有两头一帧了，2→2→2→2...

而后是jump-none

steps(3, jump-none)

示意不跳过，有多少帧就运行多少帧

动画成果就是失常的 1、2、3 顺次变动，1→2→3→1→2→3...

依据这个原理，文章结尾的小缺点就十分好解决了，将 steps(10) 改为 steps(11, jump-none) 即可

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

这样就能够失常的看到最初一个图标了

你也能够拜访以下任意链接：

  • CSS ant design logo fix (codepen.io)
  • CSS ant design logo fix (runjs.work)

之前的成果（留神比照察看最初一个点赞图标）

  • Ant Design Logo (codepen.io)

四、最初总结一下

其实这个个性也曾经进去好几年了，然而如同很少有人晓得，次要起因是这个个性应用场景不太丰盛，并且有代替计划，再者，这个个性是旧属性的补充，导致在文档上不易轻易被发现（我也是无心发现的😂）。兼容性方面，Safari还是有些拉胯，须要 14+ 才行，残缺兼容性如下：

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

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

最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

退出移动版