AI正在生成摘要
本文介绍了如何使用CSS的`steps()`函数创建定格动画。通过`steps()`,可以指定动画分为多少段,并选择在每段的起点或终点发生阶跃变化。文章以一个图片背景动画为例,展示了如何通过`background-position-y`和`steps()`函数实现图片的正序和倒序播放。
css 阶梯函数 steps()
是 animation-timing-function
属性的另一种函数值,以帧的方式过渡,可形成定格动画。
语法:
animation-timing-function: steps(number, [end | start])
代码来自:https://yeelz.com/post/559.html
参数说明:
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>
代码来自:https://yeelz.com/post/559.html