steps参数

来源:3-2 关键帧动画

陪安东尼度过漫长的岁月

2016-05-25 16:33

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

写回答 关注

2回答

  • 曦呦
    2016-06-01 15:25:23

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

    曦呦

    首尾两个图的background-position。

    2016-06-01 15:26:38

    共 1 条回复 >

  • 磅礴
    2016-05-25 22:19:15

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

    陪安东尼度过...

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

    2016-05-26 10:41:23

    共 1 条回复 >

H5+JS+CSS3 实现圣诞情缘

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

122015 学习 · 211 问题

查看课程

相似问题