                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /H5+JS+CSS3 实现圣诞情缘

steps参数

-webkit-animation-timing-function: steps(3);steps这个函数中参数该怎么确定？

陪安东尼度过漫长的岁月

2016-05-25

源自：H5+JS+CSS3 实现圣诞情缘 3-2

关注问题我要回答

1368

操作

收起

2 回答

曦呦
2016-06-01

我在网上查到的一个解释是，step()主要是的css sprite使用的，给出首位的两个图的位置，3表示切换的次数，切换3次 background-position 使其变为连续的动画。

0 回复有任何疑惑可以回复我~

收起回答

曦呦

首尾两个图的background-position。

2016-06-01 回复有任何疑惑可以回复我~

磅礴
2016-05-25

steps()函数中参数是根据自己想要动画通过几帧来执行确定的，比如在动画从开始到结束期间，你想要动画分3步完成，那参数就是3，分5步完成，那参数就是5。（要理解这个：animation-timing-function指定动画将如何完成一个周期。）

0 回复有任何疑惑可以回复我~

收起回答

陪安东尼度过漫长的岁月提问者

那他与0%，50%，75%，100%有什么关系，我看了一些资料的解释是steps这个函数中的参数仅仅是指帧与帧切换时有几个阶跃，如果这样的话那么我把steps这个函数中的参数改为1，他应该不会影响动画的整体播放。但结果是动画播放不正常

2016-05-26 回复有任何疑惑可以回复我~

0/150

提交

取消

H5+JS+CSS3 实现圣诞情缘

参与学习 121972 人
解答问题 211 个

为圣诞节准备的H5+JS+CSS特效案例教程，实现静与动的结合

进入课程

本课相似问答

1 回答steps()

1 回答steps(2) animation里没有看到这个吧？

1 回答box-shadow用法与参数设置

1 回答one是函数吗

1 回答one()函数的用法？

搜索更多本课相关问答

steps参数

我要回答关注问题

热搜

最近搜索清空

steps参数

2 回答

本课相似问答

steps参数