admin管理员组文章数量:1794759
css3动画属性菜鸟,CSS3 animation
animation-timing-function 除了上面的几种常用方式之外，还有个一实用的函数，steps(number_of_steps, direction)，这个函数叫做阶梯函数，这个函数能够起到定格动画的效果。
阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。
他有两个参数：
number_of_steps ：阶梯数(必须是一个正整数)，他将动画的总时长按照阶梯数等距划分
direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；
效果示例：
#pic {
height:90px;
width:65;
background-position: -40px -44px;
background-image: url("static.runoob/images/mix/space-to-top.png");
animation: .6s go steps(7) infinite;
}
@keyframes go {
0% {
background-position-x: -40px;
}
100% {
background-position-x: -1040px;
}
}
Tmiracle
Tmiracle
172***0275@qq1年前 (2020-02-27)
版权声明：本文标题：css3动画属性菜鸟,CSS3 animation 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1687027262a129425.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论