CSS3 animation-timing-function 中关于steps的坑
animation-timing-function中的steps
steps(n,[start|end])
传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。
第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，
默认值为 end。
要注意的是：
第一个参数n指的是把每个关键帧分成n等分，而不是把整个动画分成n等分。
例如：
/* 其他的代码 略 */
animation-timing-function: steps(3);
@keyframes move{
0%{
transform: translateY(-100px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(100px);
}
}
意思是，在0%~50%这个过程中变化3次，在50%~100%这个过程中也变化3次。
效果如下图所示：
如果改为：
animation-timing-function: steps(4);/* 3改为4 */
@keyframes move{
0%{
transform: translateY(-100px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(100px);
}
}
效果如下图所示：
此时，在0%~50%这个过程中变化4次，在50%~100%这个过程中也变化4次。
再看steps的第二个参数 start、end
以下这张图解释的挺好，要注意开区间和闭区间
需要注意的是：start看不到第一帧，end看不到最后一帧
什么意思呢？
看以下代码：
animation-name: move;
animation-duration: 4s ;
animation-timing-function: steps(1,end);
animation-direction: alternate;
animation-iteration-count: 3;
animation-fill-mode: both;
animation-play-state: running;
@keyframes move{
0%{
transform: translateY(-100px);
}
25%{
transform: translateY(-75px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(75px);
}
100%{
transform: translateY(100px);
}
}
结果如下图所示：
可以发现，第一次向下运动时，并没有触碰到边框，即
100%{
transform: translateY(100px);
}
并没有显示，同时可以发现，此时停留的时间是2倍。
当改为animation-timing-function: steps(1,start);时，情况相同，仍然只有最后才会出现最后一帧的画面。
完整代码如下所示：
animation-name: move;
animation-duration: 4s ;
animation-timing-function: steps(1,start);
animation-direction: normal;/* 改为normal */
animation-iteration-count: 3;
animation-fill-mode: both;
animation-play-state: running;
@keyframes move{
0%{
transform: translateY(-100px);
}
25%{
transform: translateY(-75px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(75px);
}
100%{
transform: translateY(100px);
}
}
结果如下图所示：
但是要注意：动画结束时是会出现最后一帧的
如果我们改为animation-iteration-count: 1;此时，只会从上到下运动一次，就会直接到底部。
完整代码如下：
animation-name: move;
animation-duration: 4s ;
animation-timing-function: steps(1,end);
animation-direction: normal;
animation-iteration-count: 1;
animation-fill-mode: both;
animation-play-state: running;
@keyframes move{
0%{
transform: translateY(-100px);
}
25%{
transform: translateY(-75px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(75px);
}
100%{
transform: translateY(100px);
}
}
结果如下图所示：
最后是全部的完整代码，可以自行修改测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
margin: 50px auto;
width: 300px;
height: 300px;
border: 1px solid;
}
#test{
position: absolute;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 20px/100px "微软雅黑";
border-radius:100% ;
animation-name: move;
animation-duration: 4s ;
animation-timing-function: steps(1,start);
animation-direction: normal;
animation-iteration-count: 3;
animation-fill-mode: both;
animation-play-state: running;
}
@keyframes move{
0%{
transform: translateY(-100px);
}
25%{
transform: translateY(-75px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(75px);
}
100%{
transform: translateY(100px);
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">邱海峰</div>
</div>
</body>
</html>