CSS3 animation ? steps 函数详解


Posted in HTML / CSS onAugust 30, 2019

这几天在看一些 css3 动画的源码实现时,发现 css 代码的 animation 当中有一个比较陌生的单词 steps ,在源码中是这么写的:

animation: thunder 2s steps(1, end) infinite;

查阅相关资料后发现 steps 函数是 animation-timing-function 属性的一个值,那这个函数相较于其他值比如 ease , linear 的区别在哪里呢。

steps

在查阅相关资料后才发现自己之前对 animation-timing-function 了解不够充分,实际上 animation-timing-function 的 function 指的是 steps() 和  cubic-bezier( ) 即贝塞尔曲线函数这两个函数,像 linear , ease 这些值其实是   cubic-bezier() 函数的特殊值, steps() 函数同样也有两个特殊值: step-start step-end 。在了解这些前提后,下面来具体分析 steps 函数的作用。

实际上 steps 函数和   cubic-bezier 函数分别对应动画的两种形式:跳跃式和连贯式。回顾平常我们是怎么使用  cubic-bezier 函数的:

div {
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  30% {
    margin-left: 50px;
  }
  100% {
    margin-left: 100px;
  }
}

我们只需要在 @keyframes 中定义关键帧, cubic-bezier 函数会帮助我们在关键帧之间补帧使其成为流畅的动画,但有时候我们不希望动画连贯的播放,而是跳跃式的播放,那我们就需要借助 steps 函数了。

steps函数接收两个参数: number 和 position 。 number 是正整数, position 有两个值: start 和 end 。前面我们提到 steps 的两个特殊值: step-start 和 step-end ,实际上它们分别代表 steps(1, start) 和 steps(1, end) 。那这两个参数分别代表什么含义呢?

number: number 表示动画被分成了多少段,比如上述例子表示 div 从 0px 移动到 100px 的这一整段过程一共被分成 4 段。

position: position 参数可选,默认为 end 。 start 与 end 的含义是什么呢,我的理解是: number 会将整个动画过程分成多段或者说多个周期, start 表示动画的状态会在每个周期的起始点瞬间完成变化,而 end 则表示动画的状态会在每个周期的结束点瞬间完成变化。这里附上 W3C 官方文档上的一张图片:

CSS3 animation ? steps 函数详解 

上图的坐标系中,x轴代表时间,y轴代表动画的进度,在这张图中我们需要注意的是实心圆点,实心圆点表示的是动画所处的状态。我们来看第一张图,它表示的是 steps(1, start) 。根据前面的解释,整段动画将会作为一段也就是只有一个周期,而指定了 start 参数使得动画会在周期的起始点状态发生改变,所以我们可以看到第一个实心圆点的坐标为 (0,1) 。对于第二张图片,由于指定了 end ,所以动画的状态会在周期的结束点突变,因此对应两个实心圆点的坐标为 (0,0) 和 (1,1) 。下面的 steps(3, start) 和 steps(3, end) 也是同样的道理,这里就不具体分析了。

接下来为了更加直观的感受 steps 函数的作用,举几个例子来加深理解:

这里先举一个连贯动画来作为参考,部分代码如下:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}

效果如下:

CSS3 animation ? steps 函数详解 

可以看到红方块是经过 2s 匀速运动到终点,然后回到起始位置

接下来是 steps(1, start) 的例子:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-start;
}

效果如下:

CSS3 animation ? steps 函数详解 

可以看到在我点击刷新的一瞬间方块就到达了终点,然后经过 2s 后回到起始位置

再来看看 steps(1, end) 的例子:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-end;
}

效果如下:

CSS3 animation ? steps 函数详解 

可以看到当点击刷新时方块并没有运动,这是因为方块会在 2s 后瞬间移动到 200px 的位置,然后动画结束,回到起始位置,由于这个过程特别快,肉眼是看不到的,所以看上去就好像方块没有运动。如果想要停留在终点只需要给 div 加上 animation-fill-mode: forwards 即可。

我们再来看看分成多段的情况,首先 start 分成多段:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 4s steps(4, start);
}

效果如下:

CSS3 animation ? steps 函数详解 

上述例子我们将 4s 动画分成 4 个周期,方块会在每个周期起始点也就是 0s ,1s ,2s ,3s 处发生位移,从上述效果图我们也可以看出,在我点击刷新瞬间就完成了一次状态变化,然后在 3s 后达到终点,在终点待了 1s 到动画结束,回到起始位置。

再来看 end 分成多段的情况:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 4s steps(4, end);
}

效果如下:

CSS3 animation ? steps 函数详解 

指定 end 会使动画状态在每个周期的结束点发生变化,对应例子就是在 1s ,2s ,3s ,4s 处发生变化。从上述效果图我们也可以看出方块在我点击刷新的 1s 后开始运动,在 4s 方块移动到终点的瞬间由于动画结束的原因又移动到起始位置,所以会产生方块好像没有移动到终点的错觉。

总结

以上所述是小编给大家介绍的CSS3 animation – steps 函数详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 #HTML / CSS
CSS3 毛玻璃效果
Aug 14 #HTML / CSS
详解css position 5种不同的值的用法
Jul 30 #HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 #HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 #HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 #HTML / CSS
详解css3中 text-fill-color属性
Jul 08 #HTML / CSS
You might like
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
composer.lock文件的作用
2016/02/03 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
python随机生成指定长度密码的方法
2015/04/04 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
SQL中where和having的区别
2012/06/17 面试题
异步传递消息系统的作用
2016/05/01 面试题
农民工创业典型事迹
2014/01/25 职场文书
银行批评与自我批评
2014/02/10 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
幼儿教师辞职信
2015/02/27 职场文书
银行实习推荐信
2015/03/27 职场文书
辩论赛新闻稿
2015/07/17 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python