AI正在生成摘要
本文介绍了如何使用CSS的`steps()`函数创建定格动画。通过`steps()`，可以指定动画分为多少段，并选择在每段的起点或终点发生阶跃变化。文章以一个图片背景动画为例，展示了如何通过`background-position-y`和`steps()`函数实现图片的正序和倒序播放。
css 阶梯函数 steps() 是 animation-timing-function 属性的另一种函数值，以帧的方式过渡，可形成定格动画。
语法：
animation-timing-function: steps(number, [end | start])
参数说明：
number 参数指定了时间函数中的间隔数量，通俗点说就是把动画分为多少段分布展示（必须是正整数）
end|start 参数是可选的，表示在每个间隔的起点或是终点发生阶跃变化，如果忽略，默认是 end。
- end：动画以间隔的终点发生阶越变化
- start：动画以间隔的起点发生阶越变化
这里有一点要注意，end|start是以点为开始或结束的！
举个例子：
把一条线段分成10份，则一共有11个点。
看起来不好理解的样子，那么换一种理解方式
steps(number, [end | start])是将动画分为number段，共有number + 1帧画面。
start就是抛弃第一帧画面执行动画，end就是抛弃最后一帧画面执行动画。
我们准备一张铁山靠的图片
这张图的尺寸为 480*2700，一共有 10 帧，所以 steps(10)；
通过 background-position-y 定义图片播放开始与结束的地方；
form 为起点坐标，to 为终点坐标；
如果正放 (从上往下)，则 steps(10, end)， 起点 from 为 0，终点 to 为 -2700；
如果反放 (从下往上)，则 steps(10, start)， 起点 from 为 -2700，终点 to 为 0；
看我铁山靠！！！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>铁山靠</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.ikun {
width: 480px;
min-width: 480px;
height: 270px;
background: url(ikun.jpg) no-repeat;
background-size: 100%;
/* animation-name: mover1; */
animation-name: mover2;
animation-duration: 2s;
/* animation-timing-function: steps(10,start); */
animation-timing-function: steps(10, end);
animation-iteration-count: infinite;
animation-fill-mode: backwards;
}
/* 倒序 */
@keyframes mover1 {
from {
background-position-y: -2700px;
}
to {
background-position-y: 0;
}
}
/* 正序 */
@keyframes mover2 {
from {
background-position-y: 0;
}
to {
background-position-y: -2700px;
}
}
</style>
</head>
<body>
<div class="ikun"> </div>
</body>
</html>
