steps
一、steps
检索或设置对象动画的过渡类型
steps(n,[ start | end ]),默认为end
step-start: 等同于 steps(1, start)
step-end: 等同于 steps(1, end)
例如下列的的动画画关键帧
div{
width: 100px;
height: 100px;
animation: run 5s steps(1,end);
}
@keyframes run{
0%{
width: 100px;
height: 100px;
}
20%{
width: 120px;
height: 120px;
}
40%{
width: 140px;
height: 140px;
}
60%{
width: 160px;
height: 160px;
}
80%{
width: 180px;
height: 180px;
}
100%{
width: 200px;
height: 200px;
}
}
如上样式,正长情况下我们设置的动画是流畅的变化(过渡性动画),当我们设置step属性时,动画将不会再流畅的变化,而是像“翻页”一样,即忽略(例:0%-20%)之间的过渡动画,将设置的时间分成帧段,按时间(1s)一帧一帧的往后“跳转”(类似setInterval)。
steps(1,end)的1就是(例:0%-20%)之间1s所跳转的帧,如果设置成2,那么之间相当于会增加一次10%{width: 110px;height: 110px;}并在这里进行过渡,值越大,变化会越来越细腻。
steps(1,end)的end就是执行时保留当前帧状态,直到这一段动画结束(0%-20%在帧时间期间保留0%状态),在上例中,动画完毕时100%状态的画面会一闪而过返回初始状态,可利用forwards弥补(如果不循环infinite)
start就是执行时保留下一帧状态,直到这一段动画结束(0%-20%在帧时间期间保留20%状态),在上例中,动画开始时0%状态的画面会一闪而过状态,但是就不好用backwards弥补