CSS3 timing-function: steps()介绍
来源:互联网 发布:找对象软件靠谱吗 编辑:程序博客网 时间:2024/06/13 13:41
在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function>。它的取值中除了常用到的三次贝塞尔曲线以外,还有个steps() 函数。
steps 函数指定了一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数);第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。
#demo { animation-iteration-count: 2;//动画重复两次 animation-duration: 3s;//每次动画持续时间为3s}
我们分别对它应用 steps(3, start) 和 steps(3, end),做出阶跃函数曲线如下:
1.取steps(3, start)
第一个参数将动画划分为了三个部分。第二个参数“start”,指定在每个部分的开始发生阶跃变化,即图中实心圆处。动画的过程就是:1/3时的状态→2/3时状态→最后的状态。
这里写了个最简单的demo,将一个盒子分5步从红色变为白色。在这个demo中你可以看到最后的状态为白色:http://runjs.cn/detail/mqbdpite
2.取 steps(3, end)
与steps(3, start)不同的是,动画的过程是:初始状态→1/3时状态→2/3状态。也就是说定义的最终状态并不会显示出来,而是显示结束前1/3时间段的状态。我们同样通过demo来观察:http://runjs.cn/detail/77frfllv。同样是由红色变为白色,但是最后的状态并不是白色。
附件中的demo是结合“雪碧图”(见链接http://km.oa.com/group/23033/articles/show/226032)和steps()实现一个小男孩奔跑的动画。
@keyframes animate { to { background-position: -3420px; }}.kai.animate { animation: animate 0.75s steps(19) infinite;}
动画完整的效果是将这幅图在0.75s内,分19次(雪碧图上刚好有小男孩19个动作),水平方向向左移动3420px(图像的宽度)。
快去下附件,让你的男孩跑起来。
- CSS3 timing-function: steps()介绍
- CSS3 timing-function: steps() 详解
- CSS3 timing-function: steps() 详解
- CSS3 timing-function: steps() 详解
- CSS3 timing-function:steps()详解
- css3关于 animation -timing- function step()介绍
- CSS3 timing-function 贝塞尔曲线
- CSS3 transition-timing-function 属性
- 【补充】animation-timing-function:steps(1, end)的steps函数
- 【CSS3】动画--过渡函数 transition-timing-function
- css3 的animation-timing-function step()函数问题
- css中animation属性animation-timing-function知识点以及属性值steps()详解
- transition-timing-function
- css3动画animation-timing-function中的cubic-bezier(n,n,n,n)
- animation-timing-function 之 step
- Animation属性 animation-timing-function
- css3 animation 中的 steps
- 关于animation-timing-function的step()
- C++ 实现单例模式
- oracle 安装问题解决办法大全
- 布尔运算
- SQL数据库的分离附加,导出脚本,备份和还原
- hdu 字典树
- CSS3 timing-function: steps()介绍
- 基础知识---计算机各层网络协议 (图)
- struts2学习笔记(十二)多文件上传
- 广度优先搜索
- UVa 1583 - Digit Generator
- Android使用Universal-ImageLoader在ListView中加载网络图片简单示例
- Java 中使用内存映射文件需要考虑的 10 个问题
- MySQL外键约束
- 如何加密Url防止被黑