CSS3动画之animation: steps()

什么是steps()?

steps() 是 Animation 中的一个 timing-function 函数， 能够实现动画的阶跃式变化，而非两个状态间的线性过渡。steps 接收两个参数：

steps ( n, [start | end] )

• 第一个参数是一个正值，指定动画分割的段数
• 第二个参数定义动画执行开始点，可设定为 start 或 end，这个值为可选值，当未传入参数时默认以 end 方式执行
  start 第一帧是第一步动画结束
  end 第一帧是第一步动画开始
  
  横轴表示时间，纵轴表示动画完成度（也就是0%~100%）

演示一：

<div class="img"></div>

.img{
	width:150px;
	height: 300px;
	background: url(./img/img70.png) no-repeat;
	background-size: 900px;
	animation: run 1s steps(6) infinite;
}
@keyframes run {
	0%{
		backgorund-position:0 0;
	}
	100%{
		background-position: -900px 0;
	}
}

演示二：

๑乛◡乛๑ 这个是人人网首页弄来的，帧动画图片太难找了。。。

<div class="intro">
	<div class="item"><a class="img img1" href=""></a></div>
	<div class="item"><a class="img img2" href=""></a></div>
	<div class="item"><a class="img img3"href=""></a></div>
	<div class="item"><a class="img img4"href=""></a></div>
	<div class="item"><a class="img img5"href=""></a></div>
	<div class="item"><a class="img img6"href=""></a></div>
</div>

 .intro{
	width: 900px;
	margin: 20px auto;
	height: 130px;
}
.item{
	width: 150px;
	height: 150px;
	float: left;
}
.img{
	display: block;
	width: 150px;
	height: 150px;
	cursor: pointer;
}
.img1{
	background: url(./img/img1.jpg) 0 0 no-repeat;
}
.img2{
	background: url(./img/img2.jpg) 0 0 no-repeat;
}
.img3{
	background: url(./img/img3.png) 0 0 no-repeat;
}
.img4{
	background: url(./img/img4.jpg) 0 0 no-repeat;
}
.img5{
	background: url(./img/img5.jpg) 0 0 no-repeat;
}
.img6{
	background: url(./img/img6.jpg) 0 0 no-repeat;
}
.active.img{
	animation: movedown .5s steps(12) forwards;
}
.unactive.img {
	animation: moveup .3s steps(7) forwards;
}
@keyframes movedown{
	0%{
		background-positon:0 0;
	}
	100%{
		background-position: 0 -1800px;
	}
}
@keyframes moveup{
	0%{
		background-position: 0 -1800px;
	}
	100%{
		background-position: 0 -2850px;
	}
}

window.onload=function(){
	let box = document.getElementsByClassName("intro")[0];
	box.onmouseover=function(event){
		let el = event.target;
		el.classList.remove("unactive")
		el.classList.add("active")
	}
	box.onmouseout=function(event){
		let el = event.target;
		el.classList.remove("active")
		el.classList.add("unactive")
	}
}

演示三：

<div id="loading"></div>

#loading {
	width: 100px;
	height: 20px;
	background-image: linear-gradient(to right, pink 0%, pink 32%, transparent 32%, transparent 34%, pink 34%, pink 65%, transparent 65%, transparent 67%, pink 67%, pink 97%, transparent 96%, transparent 100%);
}
#loading::before {
	content: '';
	width: 32%;
	height: 100%;
	display: block;
	background: rgb(223, 96, 117);
	will-change: transform; 
	animation: loader 1s infinite steps(3) normal;
}
@keyframes loader {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(100px);
	}
}

演示四：

<div id="loading"></div>

#loading {
	width: 300px;
	height: 5px;
	background: linear-gradient(to right, rgb(80, 26, 59) 0%, rgb(221, 35, 150) 50%, rgb(80, 26, 59) 100%);
}
#loading::before {
	content: '';
	width: 10%;
	height: 100%;
	display: block;
	background: white;
	will-change: transform;
	animation: loader 0.5s infinite steps(5) ;
}
@keyframes loader {
	0% {
		background-color: pink;
		transform: translateX(0px);
	}
	50% {
		background-color: white;
		transform: translateX(150px);
	}
	100% {
		background-color: pink;
		transform: translateX(300px);
	}
}

演示五：

<div id="loading">Loading... <span>|</span> </div>

#loading {
	font-size: 20px;
	color: rgb(187, 10, 119)
}
#loading span {
	display: inline-block;
	color: black;
	transform-origin: 50% 50%;
	will-change: transform;
	animation: spin 2s steps(8) infinite;
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}