在应用 CSS3 渐变/动画时，有个控制时间的属性 <timing-function> 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数。
steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>spirit动画</title>
<link rel="stylesheet" href="">
<style>
.bird{background: url(https://cdn.files.qdfuns.com/note/content/picture/201905/28/145522gd9yxe94l5px8222.jpg) -100% 0;
width: 140px;
height:85px;
animation: bird 4s steps(1,end) 1 forwards ;
}
@keyframes bird{
0% {
background-position: 0 0;
}
10%{
background-position: -100% 0;
}
20%{
background-position: -200% 0;
}
30%{
background-position: -300% 0;
}
50%{
background-position: 0 100%;
}
60%{
background-position: -100% 100%;
}
70%{
background-position: -200% 100%;
}
80%{
background-position: -300% 100%;
}
90%{
background-position: 0 0;
}
100%{
background-position: -100% 0;
}
}
</style>
</head>
<body>
<div class="bird"></div>
</body>
</html>
经测试，双排图片用steps(1)这样一帧去写，如果设计图是单排的话,如:
的话，可以用steps(10)去写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hi{
width: 50px;
height: 72px;
background-image: url("https://cdn.files.qdfuns.com/note/content/picture/201905/28/150117p6sbit8yihupt8ej.png");
/*深度理解
*整个动画1s完成。
*这里1s要移动500的像素，这1s要有十步走完，每步是平均下来是0.1s，
*每步比上一步多走了72px的位置，这个走是瞬间走到的。
*end表示每一步在接近0.1s再去走
*/
animation: play 1s steps(10) infinite;
}
/*定义动画*/
@keyframes play {
from { background-position: 0px 0px; }
to { background-position: -500px 0px; }
}
</style>
</head>
<body>
<img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL2Nkbi5maWxlcy5xZGZ1bnMuY29tL25vdGUvY29udGVudC9waWN0dXJlLzIwMTkwNS8yOC8xNTAxMTdwNnNiaXQ4eWlodXB0OGVqLnBuZw==.jpg" alt="此图片是500*72，主要是为了显示作用">
<div class="hi"></div>
</body>
</html>
原文地址：https://www.cnblogs.com/lsc-boke/p/10996958.html
时间： 2024-11-01 04:52:23