使用 CSS 的 steps() 动画让哥哥动起来,🐔🍐🌞🍓

技巧7个月前 隔壁老李于 2023-07-29 10:42:11 最后编辑

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 就是抛弃最后一帧画面执行动画。

我们准备一张铁山靠的图片

使用 CSS 的 steps() 动画让哥哥动起来,🐔🍐🌞🍓  第1张

这张图的尺寸为 480*2700,一共有 10 帧,所以 steps(10)

通过 background-position-y 定义图片播放开始与结束的地方;

form 为起点坐标,to 为终点坐标;

如果正放 (从上往下),则 steps(10, end), 起点 from0,终点 to-2700

如果反放 (从下往上),则 steps(10, start), 起点 from-2700,终点 to0

看我铁山靠!!!

使用 CSS 的 steps() 动画让哥哥动起来,🐔🍐🌞🍓  第2张

<!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>


本文由 @隔壁老李 于 2023-07-29 发布在 野路子博客,如无特别说明,本博文章均为原创,转载请保留出处。
评论 (0)
访客
Top