CSS3 animation-timing-function 中关于steps的坑

最新推荐文章于 2023-02-28 10:13:05 发布

地球OL太难玩

最新推荐文章于 2023-02-28 10:13:05 发布

阅读量758

点赞数

分类专栏：前端 H5 文章标签： CSS3

本文链接：https://blog.csdn.net/earthOLtainanwan/article/details/99565219

版权

前端 H5 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

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>