CSS3中steps()动画的详解

article/2025/9/17 22:10:42

原文作者：Joni Trythall

增修作者：Fegmaybe

一个是雪碧图的实现动画的steps效果。steps（）阶跃函数，是transition-timing-function和animation-timing-function两个属性的属性值，他是表示两个关键帧之间的动画效果，默认是ease。

steps（）有两个参数：参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。参数二是表示分成几段后，他是start还是end去执行动画。参数二有两个可选值start和end，默认是end。详细见后。

开始先看两个小的案例。

case1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.hi{width: 50px;height: 72px;background-image: url("http://s.cdpn.io/79/sprite-steps.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="http://s.cdpn.io/79/sprite-steps.png" alt="此图片是500*72，主要是为了显示作用">
<div class="hi"></div></body>
</html>

效果图：

case2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@keyframes typing {from { width: 100% }to { width:0 }}@keyframes blink-caret {from, to { border-color: transparent }50% { border-color: black }}@-moz-keyframes typing {from { width: 100% }to { width:0 }}@-moz-keyframes blink-caret {from, to { border-color: transparent }50% { border-color: black }}body { font-family:  monospace; }h1 {position: relative;float: left;font-size:150%;}h1 span {position:absolute;top:0;right:0;width:0;background: white; /* same as background */border-left: .1em solid black;box-sizing: border-box;-webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */blink-caret 1s step-end infinite;-moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */blink-caret 1s step-end infinite;}</style>
</head>
<body>
<h1>HELLO WORLD. Typing animation By Yaiel_lvya.<span> </span></h1>
</body>
</html>

效果：



这些例子很棒，帮助我开始理解这个特别的timming function，但是它们是如此优秀的例子，以至于在demo之外还是难以理解怎样使用steps()。

所以，我仔细研究了steps()并且做了一些动画demos用来帮助理解一些难点。

steps介绍

steps()是一个timing function，允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数——第一个参数是一个正值，指定我们希望动画分割的段数。

Steps(<number_of_steps>，<direction>)

第二个参数定义了这个要点 在我们的@keyframes中申明的动作将会发生的关键。这个值是可选的，在没有传递参数时，默认为”end”。方向为”start”表示一个左--持续函数，在动画开始时，动画的第一段将会马上完成。以左侧端点为起点，立即跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。

方向为”end”表示一个右--持续函数。动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模式来进行，在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行动画的元素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。每个选择本质上从一个不同的面移动这个元素并且将产生一个不同的位置在这个相同的动画里。
这面是示例图：

clipboard.png

动态解析图如下：
图片描述

填充模式和迭代次数的影响

在我们开始前，明白一个不同的填充模式或者迭代次数将会怎样影响steps()是非常重要的，例如”forwards”或者”infinite”的使用。如果我们有两辆车，使用相同的动画持续时间、相同的steps()值，但是其中一个设置迭代的次数（infinite），另一个填充（forward）,终点的这两辆汽车看起来非常不同，即使他们从相同的轴点出发。

“forwards”的命令使这个动画元素保持着@keyframes里最后一个动画样式。在动画，里将它与steps()联系使这个动作出现，好像初始的静止状态没有计算到总的步数里。当它是”end”，好像这个车行驶了额外的步数超出了你的steps()的声明，取决于你怎样看待它。

这些讲解听起来还是很散乱，但是我们将在demos里慢慢讲解。（demo地址：http://designmodo.com/demo/st...）现在最重要的事情是留心这些变化将会怎样影响你的意图和steps数。下面是infinite VS forwards车：

clipboard.png

clipboard.png

steps demos

你可以点击这里查看demos,它由以下几个部分组成：

  • 纯css实现的闹钟

  • 一些节能的css车

  • 前进的熊爪印

  • 纯css实现的进度圆

denos的预览：


css闹钟

clipboard.png

一个应用了steps()的闹钟演示。我们需要闹钟的指针旋转起来，但是不是圆滑连续的运动。使用steps()将允许我们模仿真实的闹钟的运动。

这里涉及到了一些数学知识，但是还不是很痛苦。我们需要秒针通过60步完成360度的旋转在60s的时间里。

clipboard.png

分针我们可以应用相同的@keyframes,只有改变动画的执行时间即可。分针转一圈，为3600s,即分针在3600s里，完成60步。

clipboard.png

申明：这只是一个css闹钟，并不能依赖这个闹钟来执行你的日常活动。

css cars

clipboard.png

css车演示了在steps()里使用"end"和"start"的不同。"start"使小车立即移动到一步的结束处并保持当前状态直到这一步的持续时间结束。看起来就好像使用了"start"的车的位置比使用"end"的车的位置更远，但是如果你给这两辆小车添加一个动画的延迟，你可以看到它们是从相同的起点出发的。

"end"会等到每一步的执行时间结束才会开始动画。第一辆车移动的时候，这是它的第二步，所以这两辆车没有机会同步移动。动画里白色的边框是动画当前的起始位置。

clipboard.png

熊脚印

clipboard.png

另一种更好的理解stpes()的方法是创建真实的步数。这个案例我们将会使用熊脚印。这个演示使用了由六个脚印组成的图片。这个图片被一个<div>覆盖，我们要用steps()移动这个<div>来显示出脚印，用来模仿实际的脚印。

没有使用steps()时，<div>将平滑的向右移动，这不是我们想要的效果。我们希望每个脚印可以立即完整的出现。

有六个脚印，我们需要向右移动<div>的长度为图片的整个宽度。

clipboard.png

我们的<div>将向右移动675px在7秒7步的时间里。每一步是96px宽。"end"表示我们的动画将保持它的初始状态，覆盖扬剧有的脚印直到第一步完成。

css进度圆

clipboard.png

在这个演示里我们使用"start"来动态改变不透明度。使用"start"制作一个百分比的可见度的变化。

clipboard.png

clipboard.png

所有的百分数在同一个<div>里，我们将这个<div>通过动画向上移动380px；初始值是"20%",我们需要通过四步移动<div>使数值为40%,60%,80%到最后的100%。

再次强调，使用"forwards"和"infinite"对步数的的作用是不同的。如果我们改变成"infinite"，将不会出现"100%",因为"forwards"命令使动画在我们设置的步数外添加了额外的一步。"forwards"使动画保持结束时的状态，所以在步数执行完毕后，动画会跳到最后一帧的状态并保持不变。

结束语

steps() timing function确实难以理解，但是一旦你掌握它了，就会有很多便利。css function 允许我们将动画切割成清楚的步数，或者创建平滑的动画效果。
希望这些demos可以帮助你在动画里更好的理解使用steps()。


http://chatgpt.dhexx.cn/article/RKyqiOsa.shtml

相关文章

css【详解】steps()函数

css【详解】steps()函数

steps(number, position)number 整数值&#xff0c;表示把动画分成了多少段。position 可选参数&#xff0c;表示动画跳跃执行是在时间段的开始还是结束。 —— start 在时间段的开头处跳跃 —— end 在时间段的结束处跳跃 动画效果见 https://demo.cssworld.cn/new/5/4-7.php…
阅读更多...
steps函数--参数意思和用法

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

图片解释如下&#xff0c;参数意思和用法在代码的注释中 所引用图片共7帧&#xff0c;如下&#xff1a; 尺寸为200*1400&#xff0c;所以设置div为200*200&#xff0c;分为7帧&#xff0c;除去展示帧&#xff0c;需六次步骤跳转&#xff0c;原图如下&#xff1a; 代码&…
阅读更多...
element的步骤条整合表单（steps+form）

element的步骤条整合表单（steps+form）

先上效果图&#xff1a; element ui 组件库官网 使用步骤&#xff1a; 1、页面组合步骤 > 5步 定义出4个步骤&#xff08;看你自己需要几步&#xff09;定义form表单定义4个盒子对象active属性 > 1 到 4放置表单项设置上一步和下一步的按钮 <template>//第一步…
阅读更多...
vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性

vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性

vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性 设计规则何时使用 代码演示1.基本用法2.迷你版3.带图标的步骤条4.步骤切换5.竖直方向的步骤条6.竖直方向的小型步骤条7.步骤运行错误8.点状步骤条9.自定义点状步骤条 APIStepsSteps.Step 设…
阅读更多...
组件封装 - steps组件

组件封装 - steps组件

首先, 我先来看看效果 steps 组件的封装和 tabs 组件还是相似的 都会去指定两个组件来完成(仿Element UI), 都会去使用 jsx 的语法 让其中一个组件去规定样式和排版, 另外一个组件去接收父组件传入的动态数据 但和面包屑组件还是有区别的(面包屑组件封装): 相同点都是使用两…
阅读更多...
ElementUi Steps 步骤条的使用

ElementUi Steps 步骤条的使用

效果&#xff1a; 实现&#xff1a; <el-steps :active"active" finish-status"success"><el-step title"步骤 1"></el-step><el-step title"步骤 2"></el-step><el-step title"步骤 3"&…
阅读更多...
el-steps(步骤条)的入门学习

el-steps(步骤条)的入门学习

el-steps(步骤条)的入门学习 适用场景 在有步骤流程的情况下&#xff0c;可以设置步骤条&#xff0c;引导用户向下操作&#xff0c;如四六级的报考 知识点 el-steps嵌套el-step使用el-steps的active设置Number&#xff0c;从零开始el-steps的space设置Number&#xff0c;为…
阅读更多...
Vue2步骤条（Steps）

Vue2步骤条（Steps）

Vue3步骤条&#xff08;Steps&#xff09; 可自定义设置以下属性&#xff1a; 步骤标题数组&#xff08;stepsLabel&#xff09;步骤描述数组&#xff08;stepsDesc&#xff09;步骤总数&#xff08;totalSteps&#xff09;&#xff0c;默认3当前选中的步骤&#xff08;curren…
阅读更多...
Vue3步骤条（Steps）

Vue3步骤条（Steps）

Vue2步骤条&#xff08;Steps&#xff09; 可自定义设置以下属性&#xff1a; 步骤数组&#xff08;steps&#xff09;&#xff0c;类型&#xff1a;Array<{title?: string, description?: string}>&#xff0c;默认 [] 当前选中的步骤&#xff0c;设置 v-model 后&a…
阅读更多...
CSS3动画——steps函数

CSS3动画——steps函数

CSS3动画中应用的定时函数&#xff08;timing function&#xff09;常用的有内置关键字linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end&#xff0c;另外还有两个内置的缓动函数cubic-bezier(), steps() 其中steps()这个函数是将整个动画过程分为指定的步…
阅读更多...
css3中animation的steps分步动画

css3中animation的steps分步动画

css的animation中&#xff0c;有一种描述动画变化速率的东西&#xff0c;例如常见的linear,ease-in,ease-out等&#xff0c;这些都是连续的变化&#xff0c;还有一种叫做steps的&#xff0c;它用来描述一种不连续的动画&#xff0c;也就是逐帧动画。 基本认识 steps的格式为&…
阅读更多...
概率论（离散型：0-1分布、二项分布、几何分布、超几何分布、泊松分布；连续型：指数分布、正态分布、均匀分布）数字特征（数学期望、方差、标准差或均方差、切比雪夫不等式、协方差、相关系数）个人理解

概率论（离散型：0-1分布、二项分布、几何分布、超几何分布、泊松分布；连续型：指数分布、正态分布、均匀分布）数字特征（数学期望、方差、标准差或均方差、切比雪夫不等式、协方差、相关系数）个人理解

阅读更多...
超几何分布（Hypergeometric distribution）

超几何分布（Hypergeometric distribution）

超几何分布 百度解释 https://baike.baidu.com/item/超几何分布/4782968?fraladdin 通俗解释 超几何分布中的参数是M,N,n&#xff0c;超几何分布记作X~H(N,M,n) 。假如一共有100颗球&#xff0c;20颗为红球&#xff0c;80颗为白球&#xff0c;从中不放回地拿出10个球&#x…
阅读更多...
机器学习小组知识点12：超几何分布（Hyper-Geometric Distribution）

机器学习小组知识点12：超几何分布（Hyper-Geometric Distribution）

超几何分布与二项分布的联系与区别 事实上,超几何分布和二项分布确实有着密切的联系&#xff0c;但也有明显的区别。 　　课本对于超几何分布的定义是这样的&#xff1a;一般的&#xff0c;若一个随机变量X的分布列为&#xff0c;其中&#xff0c;则称X服从超几何分布&#xf…
阅读更多...
常见分布总结-高斯分布、伯努利分布、泊松分布、几何分布、beta分布

常见分布总结-高斯分布、伯努利分布、泊松分布、几何分布、beta分布

概率分布 概率分布是指用于表述随机变量取值的概率规律，包括连续分布和离散分布。 下面作了这些概率分布的一个思维导图。 文章目录 概率分布1、离散概率分布1.1、两点分布2.2、 二项分布1.3、几何分布1.4、超几何分布1.5、泊松分布2、连续概率分布2.1、均匀分布2.2、正太分布…
阅读更多...
超几何分布的其他形式及其解释？

超几何分布的其他形式及其解释？

超几何分布定义 百度百科&#xff1a;超几何分布是统计学上一种离散概率分布。它描述了从有限N个物件&#xff08;其中包含M个指定种类的物件&#xff09;中抽出n个物件&#xff0c;成功抽出该指定种类的物件的次数&#xff08;不放回&#xff09;。称为超几何分布&#xff0c;…
阅读更多...
geometric distribution and exponential distribution（几何分布和指数分布）

geometric distribution and exponential distribution（几何分布和指数分布）

几何分布 分布函数均值和方差意义 表示经过k次实验才第一次得到正确的实验结果 比如抛硬币得到正面的需要抛的次数 指数分布 分布函数均值和方差意义 表示经过一段x之后&#xff0c;某件事第一次发生 比如经过x时间之后&#xff0c;公交车来的概率 比如餐厅从开业到第一个客人…
阅读更多...
概率论的学习和整理9：超几何分布 （未完成！！！）

概率论的学习和整理9：超几何分布 （未完成！！！）

目录 1超几何分布 Hypergeometric distribution 1.1 超几何分布的定义 1.2 为什么叫超几何分布 1.3 超几何分布的公式 &#xff08;2种公式&#xff09; 1.3.1 超几何分布的公式1 &#xff08;总体型公式&#xff09; 1.3.2 超几何分布的公式2 &#xff08;拆…
阅读更多...
概率论与数理统计基础（二）:常用离散分布 二项、泊松、超几何分、几何、 负二项分布

概率论与数理统计基础（二）:常用离散分布 二项、泊松、超几何分、几何、 负二项分布

本文列举了常见的离散分布&#xff0c;关于它们的背景、概率分布列、数学期望与方差&#xff0c;以及与之相关的一些重要性质&#xff1b;比如几何分布的无记忆性、 二项分布的泊松近似、超几何分布的二项近似。。。。可作为离散分布的知识速查表。 目录 1. 二项分布b(n,p) …
阅读更多...
如何理解几何分布与指数分布的无记忆性？

如何理解几何分布与指数分布的无记忆性？

在经济学上&#xff0c;有一个概念是沉没成本&#xff0c;大概指的是已经付出的、且不可收回的成本。针对这个概念有一个常见的说法&#xff1a; 这句话的意思是&#xff0c;既然沉没成本不可收回&#xff0c;那么在做选择的时候就不应该考虑它。举一个简单的例子&#xff0c;买…
阅读更多...
推荐文章

Copyright @ 2022~2023