animation-timing-function:steps的坑
animation-timing-function:steps(n,[start | end])。
传入一到两个参数,第一个参数把一个关键帧周期分成n等分,然后一个关键帧周期里的动画就会平均的运行。第二个参数start表示从动画的开头运行,相反,end(默认)就表示从动画的结尾开始运行。
#box{
position:relative;
width:600px;
height:600px;
border:1px solid;
}
.inner{
width:100px;
height:100px;
background:red;
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
animation-name:ani;
animation-duration:4s;
animation-timing-function:steps(5);
animation-fill-mode:both;
}
@keyframes ani{
0%{
transform:translateX(-250PX);
}
50%{
transform:translateX(0PX);
}
100%{
transform:translateX(250PX);
}
}
HTM代码:
<div id="box">
<div class="inner"></div>
</div>
页面效果:
可以看见0%-50%这个关键帧周期执行了5步,50%-100%这个关键帧周期也执行了5步。
另外:start表示看不到第一帧,end表示看不到最后一帧。
.inner{
width:100px;
height:100px;
background:red;
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
animation-name:ani;
animation-duration:5s;
animation-timing-function:steps(5,end);
animation-iteration-count:3;
animation-direction: alternate;
}
@keyframes ani{
0%{
transform:translateX(-250PX);
}
100%{
transform:translateX(250PX);
}
}
页面效果:
可以看见第一次移动的时候没有碰到右边的边框,并且当时停留的时间2倍,整个动画完了才碰到右边的边框,因为steps里的第二个参数是end,说明在动画执行的时候,看不到最后一帧,即:transform:translateX(250PX)。
将end换成start:
页面效果:
执行第二次的时候反应出来的问题跟end时候一样,这个时候看不到的是第一帧,即:transform:translateX(-250PX)。
总结:
当animation-iteration-count只有一次的时候,设置animation-timing-function:steps(n,[start | end])是正常的;
当animation-iteration-count多次的时候,设置animation-timing-function:steps的start(动画播放期间的0%);end(动画播放期间的100%)会看不见,并且停留时间为2倍,只有动画执行完毕或者开始执行前(例如延迟)才会执行第一帧或者最后一帧。