乐趣区

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

之前在这篇文章中: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;

成果如下

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

要搞清楚这个问题,须要了解 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)

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

动画成果就是失常的 123 顺次变动,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,示意 都不跳过,有多少帧就运行多少帧

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

退出移动版