欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3动画之animation: steps()

程序员文章站 2022-03-09 20:08:26
...

什么是steps()?

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

steps ( n, [start | end] )

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

演示一:

CSS3动画之animation: steps()

<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;
	}
}

演示二:

๑乛◡乛๑ 这个是人人网首页弄来的,帧动画图片太难找了。。。
CSS3动画之animation: steps()

<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")
	}
}

演示三:

CSS3动画之animation: steps()

<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);
	}
}

演示四:

CSS3动画之animation: steps()

<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);
	}
}

演示五:

CSS3动画之animation: steps()

<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);
	}
}

CSS3动画之animation: steps()