CSS3 animation steps介绍

steps()有一定的学习难度,总是搞不清楚,最主要就是startend傻傻分不清楚。我这里自我挑战下,看看能不能说清楚。

常见steps()用法举例:

steps(5, end);
steps(2, start);

steps()语法表示就是:

steps(number, position)

其中:number数值。这个很好理解,表示把我们的动画分成了多少段。

假设有如下CSS3动画keyframes,定义了一段从0~100px的位移:

@keyframes move {
    0% { left: 0; }
    100% { left: 100px; }
}

假设我们的number值是5,则相当于把这段移动距离分成了5段,如下示意图:

position关键字。表示动画是从时间段的开头连续还是末尾连续。支持startend两个关键字,含义分别如下:

  • start:表示直接开始。
  • end:表示戛然而止。是默认值。

为什么position非常难理解?

我认为两个原因:

  1. steps()属于timing function,也就是时间函数,时间这个东西是虚的,看不见,摸不着,联想乏力,所以认知成本高。这也是为什么那么多人都不珍惜时间的原因——无法感知。
  2. CSS规范中对于startend的定义是基于数学函数来的,函数这东西,多少人的噩梦,因为过于抽象,与现实难以关联,所以,如果我们盯着定义去理解startend,那就是死胡同,不归路,就算现在弄懂了,过段时间再遇到,得了,全忘光光了,函数图哪个是哪个,鬼才记得。下面这张图就出自规范文档:按照规范图再细化解释就是:
    • start:表示直接开始。也就是时间才开始,就已经执行了一个距离段。于是,动画执行的5个分段点是下面这5个,起始点被忽略,因为时间一开始直接就到了第二个点:
    • end:表示戛然而止。也就是时间一结束,当前距离位移就停止。于是,动画执行的5个分段点是下面这5个,结束点被忽略,因为等要执行结束点的时候已经没时间了:

基于现实感知重新理解position!

万物具有相对性。例如,苍蝇眼中的人类动作都是慢动作,但是人类眼中的苍蝇却非常敏捷。

同样的,startend这里的开始和结束是相对于时间而言的,但是,如果站在人类可感知的具体事物而言,startend却是相反的含义。

所以,我们可以这么理解:

  • start:表示结束。分段结束的时候,时间才开始走。于是,动画执行的5个分段点是后5个点:
  • end:表示开始。分段开始的时候,时间跟着一起走。于是,动画执行的5个分段点是前5个点:

记住position参数的含义

牢记这么一句话:一切都是反的!start不是开始,而是结束;end不是结束,而是开始。

step-start和step-end

step-startstep-endsteps()功能符简化关键字,注意,是step-*step,后面没有s

其中,step-start等同于steps(1, start)step-end等同于steps(1, end)或者steps(1)

step-startstep-end用中文短句解读就是:一步到位和延迟到位,在实际项目中有什么作用呢?

对于只有0%,100%from, to两个关键时间帧的动画,step-startstep-end是没有任何需要使用的理由的。

如果是非等分,无法过渡的阶梯动画,则有使用价值,例如下面这个基于box-shadow实现的打点动画效果:

订单提交中

实现核心代码如下(此打点方法最多排纯CSS打点动画第3位,更多见此文介绍和指引):

<button>订单提交中<span class="dotting"></span></button>
.dotting {
    display: inline-block; min-width: 2px; min-height: 2px;
    margin-right: 8px;
    box-shadow: 2px 0, 6px 0, 10px 0;
    animation: dot 4s infinite step-start both;
}
@keyframes dot {
    25% { box-shadow: none; }          /* 0个点 */
    50% { box-shadow: 2px 0; }         /* 1个点 */
    75% { box-shadow: 2px 0, 6px 0; }  /* 2个点 */ 
}

steps()与填充模式animation-fill-mode

animation-fill-mode有时候也会影响steps()的断点表现,例如下面这个语句:

animation: move 5s forwards steps(5, end);

动画只执行一次,因为没有设置infinite无限循环,而forwards虽然表示“前”,但同样和现实表现是反的,也就是动画结束时候元素保持动画关键帧最后的状态。于是,下面6个分段点都会执行,整个动画停止在第6个分段点上。

这显然不是我们想要的,怎么处理呢?

可以消减分段个数和动画运动的跨度,调整如下:

@keyframes move {
    0% { left: 0; }
    100% { left: 80px; }
}

也就是原来终点100px改成80px,同时CSS调用改成:

animation: move 5s forwards steps(4, end);

也就是原来steps(5, end)改成steps(4, end),最后100%这一帧交给forwards即可!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法与编程之美

浏览器兼容问题之我见

在本人亲身跟进一些前端项目过程中,发现相同的项目在不同的浏览器中运行出来的展示效果不太一样。上网查询下发现这样的现象叫浏览器兼容问题。那么问题来了:为什么会有兼...

8550
来自专栏不为人知的前端技巧

讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻🙆‍♂️

像rate评分组件一般都用javascript写,大概一年前,我在简书写过一篇文章原生Javascript实现星星评分组件,感兴趣的可以去看一下,很久之前写的,...

11350
来自专栏前端自习课

【Webpack】319- Webpack4 入门手册(共 18 章)(上)

最近和部门老大,一起在研究团队【EFT - 前端新手村】的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水...

15140
来自专栏不为人知的前端技巧

如何把css'content的操作跟价值发挥到最大💢

content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧?

9730
来自专栏Coco的专栏

Web 字体 font-family 再探秘

该篇文章基本没有太多移动端的字体选择及分析。并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文。

13810
来自专栏全栈修炼

56 道高频 JavaScript 与 ES6+ 的面试题及答案

用正则表达式匹配字符串,以字母开头,后面是数字、字符串或者下划线,长度为 9 - 20

16440
来自专栏前端自习课

【CSS】323- 深度解析 CSS 中的“浮动”

我觉得很多人连float是啥意识都不知道,要知道很多特性的原理是和其命名的单词或者字母有密切关联的,不是随便命名的。从名字中可以看到一些当初设计的初衷。

7420
来自专栏前端自习课

【Vuejs】317- 提升90%加载速度——Vuecli下的首屏性能优化

作者:夜行风 链接:https://segmentfault.com/a/1190000019499007

49320
来自专栏前端自习课

【CSS】318- CSS实现宽高等比自适应容器

在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半。

10030
来自专栏程序员成长充电站

2019年要学习的前5个前端开发主题

TypeScript是2018年最令人惊讶的增长故事之一.npm调查发现,有46%的npm用户使用TypeScript。它现在不仅是使用Angular的默认语言...

19320

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励