steps函数--参数意思和用法

71 阅读 0 评论 47 点赞

我是靠谱客的博主无限水壶，这篇文章主要介绍steps函数--参数意思和用法，现在分享给大家，希望可以做个参考。

图片解释如下，参数意思和用法在代码的注释中

所引用图片共7帧，如下：
在这里插入图片描述
尺寸为200*1400，所以设置div为200*200，分为7帧，除去展示帧，需六次步骤跳转，原图如下：

代码：
参数如果是start,就是在开始的时候改变,如果是end,就是在结束的时候改变.

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step 步进函数</title>
<style>
.hello {
width: 200px;
height: 200px;
border: 2px solid #ccc;
background: url(images/step-animation.png) no-repeat 0 -1200px;
-webkit-transition: background-position 0s -.3s steps(6, start);
/*
start（不匀速，每帧都是直接跳到每帧结尾处等待每帧时间结束）：以左侧端点为起点，立即
跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续
时间结束。后面的每一帧都将按照此模式来完成动画。
end（不匀速，保持开始状态，直接跳转到下次开始状态）:动画执行时，在每一帧里，动画保
持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模
式来进行。
在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行动画的元
素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。;
*/
/*分为六次（步骤），加上开始时的页面，可以看成7帧*/
/*延迟-.3s意思是直接跳到开始后0.3s处。
开始时间为0s：0s内完成6步骤，7帧*/
transition: background-position 0s -.3s steps(6, start);
}
.hello:hover {
/*background-position: 30% 30%;会导致背景位置不吻合，使动画错乱。*/
/*从背景图片0位置开始，共分为7帧，0 0，展示时是第一帧画面。*/
background-position: 0 0;
-webkit-transition: background-position .6s 0s steps(6, start);
transition: background-position .6s 0s steps(6, start);
}
</style>
</head>
<body>
<div class="hello">
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step 步进函数</title>
<style>
.hello {
width: 200px;
height: 200px;
border: 2px solid #ccc;
background: url(images/step-animation.png) no-repeat 0 -1200px;
-webkit-transition: background-position 0s -.3s steps(6, start);
/*
start（不匀速，每帧都是直接跳到每帧结尾处等待每帧时间结束）：以左侧端点为起点，立即
跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续
时间结束。后面的每一帧都将按照此模式来完成动画。
end（不匀速，保持开始状态，直接跳转到下次开始状态）:动画执行时，在每一帧里，动画保
持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模
式来进行。
在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行动画的元
素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。;
*/
/*分为六次（步骤），加上开始时的页面，可以看成7帧*/
/*延迟-.3s意思是直接跳到开始后0.3s处。
开始时间为0s：0s内完成6步骤，7帧*/
transition: background-position 0s -.3s steps(6, start);
}
.hello:hover {
/*background-position: 30% 30%;会导致背景位置不吻合，使动画错乱。*/
/*从背景图片0位置开始，共分为7帧，0 0，展示时是第一帧画面。*/
background-position: 0 0;
-webkit-transition: background-position .6s 0s steps(6, start);
transition: background-position .6s 0s steps(6, start);
}
</style>
</head>
<body>
<div class="hello">
</div>
</body>
</html>