#pic {
height:90px;
width:65;
background-position: -40px -44px;
background-image: url("https://static.runoob.com/images/mix/space-to-top.png");
animation: .6s go steps(7) infinite;
}
@keyframes go {
0% {
background-position-x: -40px;
}
100% {
background-position-x: -1040px;
}
}
animation-timing-function 除了上面的几种常用方式之外(linear、ease等),还有个一实用的函数,steps(number_of_steps, direction),这个函数叫做阶梯函数,这个函数能够起到定格动画的效果。
阶梯函数不像其他定时函数那样,平滑的过渡,而是以帧的方式过渡。
他有两个参数:
- number_of_steps :阶梯数(必须是一个正整数),他将动画的总时长按照阶梯数等距划分
- direction :可选值为start或end,默认end,也可以不写;start表示动画的第一帧会被立即执行,直接从第二帧开始,然后以第一帧结束;end则表示动画从第一帧开始到正常结束;
演示地址:https://c.runoob.com/codedemo/5643
实现动画