【译】css动画里的steps()用法详解

原文地址:http://designmodo.com/steps-c...
原文作者:Joni Trythall

我想你在css 动画里使用steps()会和我一样有很多困惑。一开始我不清楚怎样使用它,于是搜索出了两个案例:typing demo by Lea Verouanimated sprite sheet by Simurai.

这些例子很棒,帮助我开始理解这个特别的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实现的进度圆

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()。


前端
前端笔记,译文等
304 声望
6 粉丝
0 条评论
推荐阅读
上传图片本地预览效果实现(兼容IE8)
最近项目里需要用到上传图片并预览的功能,于是写了个jQuery预览图片插件,下载地址。如果有需要的,可以直接下载。第一次写jQuery插件,如有不对之处,欢迎大家指正。下面是一些相关的知识点。

zilan7阅读 11k评论 2

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.3k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan30阅读 2.3k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.7k评论 1

封面图
万能的CSS 渐变!单标签绘制一个足球场
一眼望去,这里的形状只有圆形和矩形,在不借助其他标签的情况下(包括伪元素),其实很容易联想到渐变,一起看看如何绘制的吧,有非常多的渐变小技巧~

XboxYan18阅读 1.9k评论 8

封面图
304 声望
6 粉丝
宣传栏