了解CSS的定时功能

世界人民，系好安全带，紧紧抓住，因为你是要经历真正的惊心动魄的兴奋，因为你能掌握的巨大有趣的CSS计时功能的复杂性！

好了，这篇文章的主题可能还没有发送你的血的赛车，但所有的笑话不谈，定时功能是有点隐藏的宝石 ， 当涉及到CSS动画，你可以很好地到底有多少惊讶你可以用它做。

首先，让我们来设置场景，并确保我们都熟悉的定时功能相关的场景。 至于提到的功能，当你工作在CSS动画，其中包括CSS过渡以及基于关键帧动画的境界变为可用。 那么，它究竟是什么和它有什么作用？

CSS的定时功能的解释

这是不太明显的动画为基础的CSS属性之一，而它的大部分同行是相当不言自明。 然而，它的要点是，它使您能够控制和改变动画的加速 – 也就是说，它定义了动画的速度并在指定的时间变慢。

虽然它不会影响动画的实际持续时间，它可能对如何快或慢的用户感知动画是有深远的影响。 如果你不卖的它的实际目的，学懂，然后用我坚持在这里，因为定时功能特性得到了很多更有趣的比定义提出。

注意 ：有一个名为“计时功能。”当我把这个“财产”，其实我指的是既没有实际财产transition-timing-function和animation-timing-function特性。

在继续之前，让我们熟悉一下语法，以及它安装到定义的CSS动画的全过程。 为了简单起见，我们使用这个例子一个CSS过渡。 首先，我们将过渡性质的全排列：

 div { transition-property: background; transition-duration: 1s; transition-delay: .5s; transition-timing-function: linear; } /* This could, of course, be shortened to: */ div { transition: background 1s .5s linear; }

简写为定义一个过渡是相当宽松的，该命令是，延迟参数必须的持续时间值后加以说明（但不一定后立即）的唯一要求。 此外， transition-duration值实际上是所需的代码功能是唯一的; 而且由于其他参数的默认值是足够的大部分时间，你的转换很少需​​要比下面的代码片段什么了：

 div { transition: 1s; } /* This is the same as saying: */ div { transition: all 1s 0s ease; }

但是这是一个有点无聊。 而默认值通常足以满足标准悬停事件，而有关，如果你正在做的东西多一点实质性的，那么计时功能是一个严重的伎俩微调动画！

不管怎么说，你现在有定时功能做什么的想法。 让我们来看看它是怎么做的。

寻找引擎盖下

你们中许多人可能不看过去的可用关键字的定时功能特性，其中有五： ease （默认）， ease-in ， ease-out ， ease-in-out和linear 。 然而，这些关键字只是速记定义的贝塞尔曲线。

该怎么办？！

你可能不熟悉这个术语，但我敢打赌，你实际上已经看到了贝塞尔曲线 – 赫克，如果你已经使用图形编辑软件，那么你可能甚至创建了一个！ 这是正确的，当你使用钢笔或路径工具创建一个漂亮的光滑曲线，那么你绘制贝塞尔曲线！ 总之，要拿到本节的点， 贝塞尔曲线的背后是计时功能的神奇 ; 它基本上描述了一个图形加速模式。

如果你喜欢我什么，我第一次看到这样的贝塞尔曲线，那么你可能会在地球上不知道如何该曲线可以从四个点绘制在图上形成！ 我不可能告诉你的话，但是，幸运的是，我有一个特别神奇的GIF做的工作对我来说， 礼貌维基百科 。

因为这条曲线是由四个点组成，我们把它作为一个“立方”贝塞尔曲线，而不是一个“二次”曲线（三个点）或“四次”曲线（5分）。

引入立方贝塞尔（）函数

那么现在，这就是事情变得很兴奋，因为我揭示，你实际上可以得到访问该曲线通过cubic-bezier()函数，它可以简单地代替计时功能属性值的关键字的使用。 我明白，你可能需要一些时间来控制你的兴奋……

与cubic-bezier()函数，你可以操纵贝塞尔曲线无论你的愿望 ，你的动画创建完全自定义的加速模式！ 那么，让我们来看看这个函数是如何工作的，以及它如何使您能够创建你自己的贝塞尔曲线。

首先，我们知道，该曲线是由四个点，这被称为点0，点1，点2和点3形成。要注意的另一重要的事情是，在第一和最后一个点（0和3）已经图上的定义，与0点总是坐在0,0 （左下）和第3点一直坐在1,1 （右上）。

只留下点1和点2供您绘制在图上，你可以使用做cubic-bezier()函数！ 该函数有四个参数，第2点是1的x和y坐标以及后两者是点2的x和y坐标。

 transition-timing-function: cubic-bezier(x, y, x, y);

获得舒适与语 ​​法，以及它是如何创建的曲线，并与动画的物理效果，我带你去通过五个计时功能的关键字，它们相当于cubic-bezier()值和由此产生的影响上的动画。

易于在出

让我们先从ease-in-out关键字，因为这条曲线背后的逻辑，以及如何将其转换为动画可能是最容易理解的。

 /* The cubic-bezier() equivalent of the ease-in-out keyword */ transition-timing-function: cubic-bezier(.42, 0, .58, 1);

你可以看到，点1被定位在0.42沿x轴方向和在0上的y轴，而点2位于0.58上的y轴与x轴和1。 其结果是一个完全对称的贝塞尔曲线，这意味着动画将缓解至全速，然后缓解了在完全相同的速度; 因此，该关键字的名称。

如果你看看下面的演示中，你将看到的物理效果ease-in-out价值，以及如何比较其他的关键字值。

缓解

在ease的关键字是CSS计时功能属性的默认值，它实际上是非常相似的前一个，虽然它简化了在缓和出更逐步之前更快的速度。

 /* The ease keyword and its cubic-bezier() equivalent */ transition-timing-function: cubic-bezier(.25, .1, .25, 1);

你可以看到一个清晰的倾斜的曲线开始，而结束时更抽出，直接转换到这个计时功能对动画中的物理效果。 不要忘了审查的每一个例子来比较的影响后，参考前面的演示。

易用性并缓解出

在ease-in和ease-out关键字是勿庸置疑，绝对对立。 前者例在维持全速一直到终点之前，而后者命中全速马上回落至终点前的蝙蝠。 在ease-in-out关键字，我们看了以前就是因为逻辑建议，这两个贝塞尔曲线的完美结合。

 /* The ease-in keyword and its cubic-bezier() equivalent */ transition-timing-function: cubic-bezier(.42, 0, 1, 1); /* The ease-out keyword and its cubic-bezier() equivalent */ transition-timing-function: cubic-bezier(0, 0, .58, 1);

线性

最后的关键词来地址不对应的曲线在所有。 正如其名称所暗示的， linear的定时函数值保持相同的速度在整个动画，这意味着所得的贝塞尔曲线（或缺乏）。将只是一条直线。 根本就没有变加速图案描绘在图形上。

 /* The linear keyword and its cubic-bezier() equivalent */ transition-timing-function: cubic-bezier(0, 0, 1, 1);

如果你回头来演示，你可能会注意到，尽管所有的具有完全相同的持续时间值的例子，一些动画似乎比别人慢。 这是为什么？ 那么，采取ease-in-out关键字作为一个例子，我们知道，它开始和结束以较慢的速度，这意味着它已经覆盖到动画的中间地带以更快的步伐。 这有效地确保了我们感知的实际的动画是既短且快，同时，例如，线性的动画显示更长和更引出。

你可能会觉得，这篇文章是非常缓慢缓和到其充分的步伐（见我做什么呢？），所以现在它终于有时间来加强了一点东西，看看如何使用cubic-bezier()函数来创建我们自定义定时功能。

创建自定义加速模式与立方贝塞尔（）函数

现在，我们已经看到了关键字如何等同于相应的贝塞尔曲线，并看到他们对动画效果，让我们来看看如何操作曲线来创建自定义加速模式。

您现在应该能够绘制点1和2上使用的图形cubic-bezier()函数，并且具有这将如何影响动画的一个非常坚实的想法。 然而，考虑到你在绘制的图形，你通常看不出来，很明显，这可能会非常繁琐非常迅速点。

幸运的是，人们喜欢LEA Verou存在，似乎谁也不会休息，直到CSS的发展不能作出任何容易！ 执法机关已制定适当命名的立方贝塞尔，这基本上是一个操场，用于创建完全自定义的贝塞尔曲线，并在行动中比较它们预定义的关键字。 这意味着对你来说是不是繁琐编辑小数在你那， cubic-bezier()函数，你可以参观三次Bezier 和与曲线玩，直到你达到预期的效果。 方便多了。

速记关键词给你计时功能开始与伟大的选择，但它们之间的差异往往会出现轻微的。 只有当你开始创建自定义的贝塞尔曲线将你实现根治的效果的定时功能，可以对动画。

试想一下，在下面的操作实例看动画之间的差异极大，尽管他们都具有完全相同的持续时间值。

让我们来仔细看看第一种例子，试着理解它为什么会产生这样一个完全不同的效果。

 /* cubic-bezier() values for first example from preceding demo page */ transition-timing-function: cubic-bezier(.1, .9, .9, .1);

这种定时功能和默认关键字之间的主要区别是对“发展”规模（y轴）的贝塞尔曲线的急剧倾斜。 这意味着该动画会在短时间，在中间一长逐步暂停（其中曲线的水平下）。 这种模式形成鲜明的对比与什么我们已经成为用来与计时功能的关键字，它采取了相反的做法，与缓解期到来的开头或动画的结束，而不是在中间。

与现在的自定义贝塞尔曲线收入囊中，想必大家都不过用尽的功能cubic-bezier()函数，对不对？！ 你会这么认为，但这个狡猾的乞丐得到了更了它的袖子！

获得创意与贝塞尔曲线

没错，这是真的：贝塞尔曲线变得更加精彩！ 谁想得到？ 范围变宽的启示，只在时间刻度（x轴）被限制在0-1的范围在图上，而级数尺度（y-轴）可以在下面和超越典型0-1范围延伸。

级数的规模正是你会以为这就是与底端（0）标示动画开始和顶端（1）标志着动画的结尾。 通常情况下，三次Bezier曲线始终沿着这条发展规模向北行进在不同的强度，直到达到动画的结束点。 然而，绘制点的这0-1范围1和2以外的能力允许的曲线蜿蜒回落级数的规模，这实际上导致反向运动的动画！ 与以往一样，明白这一点的最好办法是通过视觉效果：

你可以看到，点2的典型0-1范围之外绘制为-0.5，而这又拉动曲线向下移动。 如果你看看下面的演示中，您将看到这会在动画中间的弹跳效果。

相反，你可以把这个向后运动在动画的开头，也使其暂时超过其预期的终点运行。 你可以把它像走了几步回得到一个良好的开端; 然后，到了最后，你的动力承载你过去你的目的地，导致你采取后退几小步，以确保您在预定到达目的地。 看看实际的例子真正理解我们在谈论这里。 此外，产生这样的效果的贝塞尔曲线可以如下所示。

你现在应该对如何心中有数cubic-bezier()的典型0-1范围之外的值可以实际影响如何动画发挥出来。 我们可以看看整天搬家纸箱，但让我们完成这个部分有一个例子，清楚地表明这种类型的创意计时功能。

这是正确的：我们正在制作动画的浮动气球！ …什么？ 难道你一直想做的事，与CSS？

在简短的这个动画是为了“增加氦”上点击气球，使其漂浮到了“天花板”，在那里将坚持前上方小幅反弹，因为它自然会。 使用cubic-bezier()的0-1范围之外的值允许我们创建的反弹，并最终有助于产生逼真的效果。 下面的代码片断显示了所使用的坐标cubic-bezier()函数，并由此产生的贝塞尔曲线下方出现了。

 /* The cubic-bezier() values for the bouncing balloon */ transition-timing-function: cubic-bezier(.65, 1.95, .03, .32);

这个例子说明了特别好如何曲线转化为生成的动画，因为它反映了近乎完美。 首先，可以看到，该曲线从级数规模的开始行进到端在一条直线上，这表明气球从动画的开始行进到终点以恒定的速度。 然后，非常类似于气球，曲线反弹的规模的顶端并进入反转稳定和逐步恢复到前上方。 一切很简单真的！

一旦你掌握了曲线和操纵它做你想做什么的技巧，你已经钉了。

定时功能和关键帧为基础的CSS动画

最后一件事在移动之前要注意（是的，有更多的覆盖！）是当应用到CSS的关键帧动画的定时功能的行为。 这些概念都是完全一样的那些在转型的例子，我们已经工作这么远，但是有一个例外，那就是要注意的重要：当你申请一个定时功能的一组关键帧，它是每执行关键帧 ，而不是动画作为一个整体。

为了澄清，如果您有四个关键帧移动一个框四角方形的，并且应用了我们在前面的气球示例中使用的“反弹”的计时功能，然后每四个动作会经历反弹，而不是整个动画。 让我们看到这个动作，并查看代码。

 @keyframes square { 25% { top:200px; left:0; } 50% { top:200px; left:400px; } 75% { top:0; left:400px; } } div { animation: square 8s infinite cubic-bezier(.65, 1.95, .03, .32); top: 0; left: 0; /* Other styles */ }

注意，如果在100%关键帧没有被定义，则该元素将简单地返回到它的原始风格，这是所期望的结果在这种情况下，如此定义它是没有必要的。 它是从该定时函数应用到每个四个关键帧的演示显而易见的，因为它们每一个出现弹离所述容器的壁上。

如果你需要某些关键帧采取计时功能，它是从别人不同，然后继续前进，直接申请一个独立的计时功能价值的关键帧，如下面的代码片段所示。

 @keyframes square { 50% { top: 200px; left: 400px; animation-timing-function: ease-in-out; } }

介绍的步骤（）计时功能

难道你以为我们已经做完了计时功能？ 哈，再想想，伙计！ 我告诉你，有很多更多的CSS定时功能比一些预定义的宽松功能！

在本节中，我们可以交换我们的曲线为直线，因为我们探讨的“步进功能”，这是通过实现这个概念steps()的计时功能。

在steps()函数更多的是一种小众的工具，而是要在工具箱仍然是有用的。 它使您能够打破动画分成几个步骤，而不是通常的补间运动，我们已经习惯了。 例如，如果我们想动画的正方形移动400个像素的权利四个步骤4秒钟以上，然后将方会跳100像素每秒的权利，而不是在一个连续的动作动画。 让我们来看看，我们就需要为这个特殊的例子，这应该是一个绝对的微风现在我们已经解决了的复杂的语法cubic-bezier()函数！

 div { transition: 4s steps(4); } div:target { left: 400px; }

正如你可以看到，它的声明的步数来划分的动画变成一件简单的事情 – 但是记住，这个数字必须是正整数，所以没有底片或小数。 然而，第二个，可选参数提供给我们稍微控制，这是可能的值start和end ，后者是默认值。

 transition-timing-function: steps(4, start); transition-timing-function: steps(4, end);

的值start将在每个步骤开始运行动画，而的值end会在每一步结束时运行的动画。 使用前面的“移动框”例如，下面的图像做了解释这些值之间的差异一个更好的工作。

可以看到，用一个值start ，该动画一旦它被触发时开始，而具有的值end ，它开始于（在这种情况下，正被触发之后一秒钟）的第一个步骤结束。

而只是为了确保本概述是真正全面的，也有两个预定义的关键字的steps()函数： step-start和step-end 。 前者相当于steps(1, start) ，而后者则是相同的steps(1, end) 。

创造性的使用案例步进功能

好了，你可能没有太大的必要，很多时候动画在步骤一动箱，但也有很多其他很酷的使用的steps()函数。 例如，如果你把所有的精灵一个基本的动画片，那么你可以使用这个技术，通过帧通过帧开始播放它，只用了几个CSS属性的！ 让我们看一个演示，这使得它的功能的代码。

 div { width: 125px; height: 150px; background: url(images/sprite.jpg) left; transition: 2s steps(16); /* The number of steps = the number of frames in the cartoon */ } div:target { background-position: -2000px 0; }

首先，我们有一个小矩形框（125像素宽），其中有包含16帧并排背景图像（2000像素）。 此背景图像是与框的左边缘开始冲洗; 因此，所有我们现在需要做的是将背景图像一路向左，让所有16帧通过小矩形窗口。 与正常的动画帧也只是滑动的视图和列的背景图像向左移动; 然而，与steps()函数中，背景图像可以向左移动以16个步骤，从而确保每一个16帧的捕捉和输出的图，如需要的话。 就这样，你在玩一个基本的动画片只使用一个CSS过渡！

另一种创造性的使用steps()函数，我发现来礼貌LEA Verou（还有谁？），谁想出了一个特别聪明的打字动画，我将打破你现在的。

首先，你需要一些文字，然后 – 遗憾的是 – 你需要知道到底有多少个字符，你正在使用的，因为你需要使用在CSS这个数字。 另一个要求是，该字体必须是等宽的，因此，所有的字符都是完全一样的宽度。

 <p>smashingmag</p> .text { width: 6.6em; width: 11ch; /* Number of characters */ border-right: .1em solid; font: 5em monospace; }

我们正在使用的文字有11个字符。 随着的帮助下ch的CSS单位，我们实际上可以用这个数字来定义段落的宽度，虽然我们应该为那些不支持本机浏览器中指定一个备用的宽度。 段落，然后给出一个坚实的黑色边框的右侧，这将成为光标。 现在一切都到位; 我们只需要制作动画，这是非常简单的。

两个单独的动画是必需的：1的光标，一个用于键入。 为了实现前，我们需要做的是使黑色边框闪烁，这再简单不过。

 @keyframes cursor { 50% { border-color: transparent; } } .text { /* existing styles */ animation: cursor 1s step-end infinite; }

按计划，黑色边框之间简单的黑色和透明的，然后不断循环切换。 这是其中的steps()的功能是至关重要的，因为，没有它，光标只会淡入淡出，而不是闪烁。

最后，打字动画也很简单。 所有我们需要做的是减少该段的宽度为零，在11个步骤（字符数）动画回全宽前。

 @keyframes typing { from { width: 0; } } .text { /* existing styles */ animation: typing 8s steps(11), cursor 1s step-end infinite; }

有了这个单个关键帧，文本，就会发现自己一个字母的时间超过8秒，而黑色border-right （光标）会连续闪烁了。 这个技术非常简单但非常有效的。

刚刚加入到这个优秀的使用steps()由LEA Verou功能，倒车的效果，使文本显示要删除也是不在话下。 要做到这一点，只需更改关键帧的关键字，这样它会读取to ，而不是from ，然后添加一个animation-fill-mode的参数forwards到设定的animation规则。 这将确保一旦文本“删除”（即当动画已经完成），文本将保留删除。 看看下面的例子中看到这个动作。

不足之处，以两者的功能本节中的例子是，你必须预先知道，以指定的步骤正确的帧数或字符数，如果这个数的变化的话，那么你将需要改变代码很好。 尽管如此， steps()函数显示在这里它的价值，是一个很棒的作品的CSS定时功能的功能。

该浏览器支持情况

我们已经建立了，你不能使用一个CSS定时功能，除非浏览器支持CSS为基础的动画 – 即CSS转换和CSS动画（基于关键帧）模块。 幸运的是，支持是非常伟大的形状，这些天。

支持CSS过渡

尽管目前所有的浏览器版本已经降到了前缀转换（这是真棒），你会是明智的，仍然包含-webkit-前缀，以满足旧的移动浏览器。 我觉得需要包括-moz-和-o-前缀，但是，已经过去了，只要你逐步提高，你应该无论如何做什么！

支持CSS动画

再次，关键帧动画，只包含-webkit-前缀的旁边不加前缀的代码。

显然，对于基于CSS的动画浏览器的支持是绝顶，但是支持是稍微比较零散，当涉及到的定时功能的细微差别。 下表详细解释。

支持CSS的定时功能

再次，虽然支持全系列的计时功能功能某些浏览器已久一点，你可以看到，支持现在普遍的跨越目前的浏览器版本。

总结

所以，我们学到了关于CSS的计时功能？ 时间来回顾一下。

• 它们定义在动画加速和减速。
• 还有更大量的对他们不仅仅是预定义的关键字。
• 您可以创建反弹效应cubic-bezier()的0-1范围之外的值。
• 你可以打破一个动画到任意数量的措施，而不是补间运动。
• 浏览器的支持是在梦幻般的形状和不断改进。

最后，虽然这些技术都全线现在支持，这将不是关于CSS3技术的文章，如果我没有提到渐进增强。 从下往上总是工作; 也就是说，确保你的工作是可以接受的，对设备和浏览器为提高浏览器，可以应付他们才具有此功能，可以不处理访问。