了解CSS3位移时间属性

yellowfrog 发布于9月前 阅读5942次
0 条评论

朋友们,现在你要保持冷静,因为错综复杂的非常有趣的CSS时间函数将会带你体验美妙的时刻

好的,所以这篇文章的主题可能没有在你的血液中,但除了所有的玩笑外, 时间函数是一个隐藏的宝石 当谈到CSS动画,你可以很惊讶的是你能做多少。

SmashingMag上更多的推荐阅读

首先,让我们设置场景,确保我们都熟悉时间函数相关的场景。当你在处理CSS动画方面的工作,包括css以及基于关键帧的动画。那么,它到底是什么呢?

CSS3动画功能解析

这是一个不太明显的以CSS属性为基础的动画,而且其他的CSS属性比较好理解。然而,他的要点是,它使您能够控制和改变动画的加速度。也就是说,你可以对特定的动画持续时间的快慢进行控制。

然而实际上我们不是影响动画的持续时间,但是我们可以按照用户的期望改变动画的执行快慢。如果你不是很了解它实际的效果,那么你可以跟随着我,因为时间函数拥有比它表面的定义更有趣的地方。

注意点: 实际上并没有"时间函数"这个属性,我们定义的这个"属性",实际上包括”位移时间函数“和”动画时间函数“这两个属性。

在此之前,我们先整个了解下它的语法以及它是怎么用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 。然而这些关键字用来定义贝塞尔曲线的。

这是什么?

你可能不太了解这些关键字,但是我敢肯定,如果你用过图形绘制软件其实你知道贝塞尔曲线了,可能你也创建过呢!那就对了,当你用面板或者路径绘制一个漂亮的光滑曲线的时候,你已经绘制了贝塞尔曲线了。你已经知道了它的要点了, 贝塞尔曲线就是时间函数背后的魔术师 。它主要描述了加速度的模式。

了解CSS3位移时间属性

ease 关键字呈现出上述动画

如果你也是第一次接触贝塞尔曲线,你可能有以为它到底怎么让四个点绘制成一个图像。我可能也没有办法用一句话告诉你原因,但是幸运的是我们可以用GIF图进行说明, courtesy of Wikipedia

了解CSS3位移时间属性

_A cubic Bézier curve being drawn (Image: Wikipedia )_

因为这是用四个点形成的,我们称之为”立方“贝赛尔曲线,与之对应还有”二次方“贝赛尔曲线(三个点)或者”四次方“曲线(五个点)

介绍贝塞尔函数

现在,当我可以获得这条曲线通过cubic-bezier()函数,并且它可以被用于时间函数属性值的关键字,这让你变得非常兴奋。你可能需要点时间去享受你的兴奋时刻…

通过 cubic-bezier() 函数,你可以操作任意你想要的贝塞尔曲线,完全去创建一个自定义的加速模式的动画。所以,让我们了解一下它是怎么工作的,又是怎样创建你的贝塞尔曲线的。

首先,我们知道贝塞尔曲线通过点去创建的,这些点为0,1,2,3。另外一个重要的点需要记住的,那就是第一个点与最后一个点已经为定义好了在画布上。通常第一个点为'0,0'(左下角),最后一个点为'1,1'(右上角)

在画布上我们只能控制1点和2点通过‘cubic-bezier()’函数。函数有四个参数,第一组为x,y轴。

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

为了更好的理解语法,与此同时更好的明白它是怎么影响动画的。我们先去了解5个时间函数的关键词,他们与'cubic-bezier()'函数的属性是一样的效果。

ease-in-out

先从ease-in-out关键词开始,因为它背后的逻辑曲线以及它如何转换成动画可能是最容易理解。

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

了解CSS3位移时间属性

一个完美的贝塞尔曲线,这个动画是逐步的加速然后逐步的减速。

你可以看到点1是定位在0.42沿着轴和在0轴,而2是定位在0.58轴和1轴。结果是一个完美对称的贝塞尔曲线,这意味着动画将在全速然后缓解缓解速度完全相同的;因此,这就是此关键字的意义。

如果你看看下面的演示,您将看到ease-in-out的效果,以及它如何与其他关键字值进行比较。

bHzqm 通过 Stephen Greig ( @stephengreig ) 在 CodePen .

Ease

缓解关键字是CSS定时功能属性的默认值,这是非常类似于前一个,虽然它简化了在速度更逐渐宽松。

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

了解CSS3位移时间属性

The curve for the keyword ease eases in at a faster pace before easing out much more gradually.

关键字 ease 先快速后慢慢的降速。

你可以看到一个更倾斜的曲线最初,在完成更多拉长,这直接转化为时间函数的物理效应的动画。别忘了把前面演示在回顾这些例子比较效果。

ease-in and ease-out

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);

了解CSS3位移时间属性

贝塞尔曲线在 ease-in 关键字(左)和 ease-out 关键字(右)( Large version )_

Linear

final关键字地址并不对应于一条曲线。顾名思义, linear 定时功能价值保持同样的速度在整个动画,这意味着最终的贝塞尔曲线(或缺乏)将是一条直线。没有不同的加速模式来描述在图上。

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

了解CSS3位移时间属性

linear 定时功能保持同样的速度在整个动画过程中

如果你参考演示,你可能会注意到,尽管所有的例子有相同的值,持续时间的一些动画似乎比别人慢。这是为什么呢?嗯,采取 ease-in-out 关键字作为一个例子,我们知道它开始和结束以较慢的速度,这意味着它必须覆盖动画的中间地带以更快的速度增长。这有效地确保我们感知的实际动画既短又快,虽然说,线性动画似乎更长和更漫长。

你可能觉得这篇文章非常缓慢放松到完整的步伐(见我做什么?),现在是最后一步一点,看看如何使用 cubic-bezier() 函数来创建自己的自定义时间的功能。

通过cubic-bezier()函数创建自定义加速度模式

既然我们已经了解了关键字等于相应的贝塞尔曲线和动画的效果,让我们看看如何操作曲线来创建定制的加速模式。

你现在应该能够情节点在图1和图2使用 cubic-bezier() 函数和有一个很坚实的想法这将如何影响动画。然而,考虑到你绘制图表,你通常看不见,显然这很快就会变得非常单调乏味。

有幸的是,像Lea Verou这样的人存在,不知疲倦的推动着CSS动画发展。Lea 发明了 Cubic Bézier ,一个基础的平台用来创建自定义曲线。对你意味着,你可以不用编辑冗杂的 cubic-bezier() 函数,通过访问 Cubic Bezier ,去探求你想要的曲线,很方便。

了解CSS3位移时间属性

Lea Verou’s superbly useful Cubic Bézier ( Large version )

速记关键词给你伟大的时机的选择功能,但它们之间的区别往往显得小。只有当你开始创建自定义贝塞尔曲线会你意识到激进的影响时间函数对一个动画

看看下面的工作例子看到动画之间的极端差异,尽管它们有相同的时间值。

查看Pen baFhH by Stephen Greig ( @stephengreig ) on CodePen .

让我们仔细看看第一个例子,并试着理解为什么它会产生如此截然不同的效果。

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

了解CSS3位移时间属性

时间函数和默认关键词之间的主要区别是Bézier曲线对“动画变化趋势”的规模急剧倾斜(Y轴)。这意味着动画在短时间内进行,在中间有一个长时间的渐变(当曲线水平向外)。这种模式形成了鲜明的对比与我们已经习惯带定时功能的关键词,它会采取相反的方法,用宽松的时期即将开始或结束的动画,而不是在中间

我们已经掌握了自定义贝塞尔曲线,我们也肯定都筋疲力尽的对于 cubic-bezier() 函数,对吧? !你会这样想,但这狡猾的乞丐有更多的东西。

开始创造贝塞尔曲线

是的,这是真的:Bézier曲线得到更令人兴奋!谁会想到?范围扩大的启示,只有时间尺度(X轴)被限制在0 - 1的范围,在图上,而进步规模(Y轴)可以扩展以下和超出典型的0 -范围。

进步规模正是你认为它是,与底端(0)标记动画的开始和顶端(1)标记动画结束。通常,三次Bézier曲线一直向北走é沿着这发展规模在不同的强度直到达到动画的结束点。然而,能够绘制点1和2以外的这0 - 1范围允许曲线蜿蜒回落的进展规模,这实际上导致反向运动的动画!与以往一样,最好的方式来理解这是通过视觉

了解CSS3位移时间属性

一个定制的贝塞尔曲线使用典型的0 - 1范围之外的值

外可以看到2点绘制典型的0 - 1范围为-0.5,进而把曲线向下。如果你看看下面的演示中,你会发现这将创建一个跳跃的中间的动画效果

查看Pen kILDb by Stephen Greig ( @stephengreig ) on CodePen .

相反,你可以把这个向后运动的动画也画龙点睛它暂时跑过去。把它像采取几个步骤先助跑,然后,最后,你的动力你过去的目的地,让你后退几步,以确保您到达目的地。看工作例子真正理解我们在说什么。此外,贝塞尔曲线产生这种效果所示。

查看 Pen xcCqj by Stephen Greig ( @stephengreig ) on CodePen .

了解CSS3位移时间属性

一个定制的贝塞尔曲线使用典型的0 - 1范围之外的值

现在,您应该有一个不错的主意如何cubic-bezier()典型的0 - 1范围以外的值可以身体影响动画播放出来。我们可以看看移动箱子一整天,但是让我们完成本节的例子清楚地演示了这种类型的创造性的计时功能。

查看 Pen vbqBh by Stephen Greig ( @stephengreig ) on CodePen .

没错:我们在制作浮动气球!…什么?你不是一直想用CSS做吗?

这个动画的简称是“添加氦”的气球点击,使其浮到“天花板”,它会反弹前坚持到顶端,因为它自然会。使用cubic- bezier()价值0–1范围外允许我们创建反弹最终能产生逼真的效果。下面的代码片段显示了用于cubic- bezier()函数的坐标,以及由此产生的Bézier曲线出现低于。

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

了解CSS3位移时间属性

一个定制的贝塞尔曲线来模拟一个跳跃的气球

这个例子解释了特别好曲线如何转化为生成的动画,因为它反映了几乎完美。首先,你可以看到曲线从发展规模的开始到最后的一条直线,表明气球旅行从动画的开始到结束以恒定速度。非常类似于气球,曲线反射的规模,稳步走向了相反的方向返回之前,逐步到顶部。真的很简单!

一旦你掌握了曲线和操纵的艺术它做你想做的事,你钉。

时间函数与帧动画为基础的CSS动画

最后一件事要注意,继续前进(是的,有更多的覆盖!)有定时功能的行为时,应用CSS关键帧动画。的概念都是完全一样的那些在转型的例子我们已经与目前的工作,但是有一个例外,就是要了解重要的:当你申请一个时间函数的一组关键帧,每帧执行它,而不是作为一个整体的动画。

澄清,如果你有四个关键帧,移动一盒左右的正方形四个角,和你申请的“跳跃”计时功能,我们在前面的气球用的例子,然后每四个运动会反弹,而不是整个动画。让我们看看这个在行动和查看代码。

查看 Pen rscGb by Stephen Greig ( @stephengreig ) on CodePen .

@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;
   }
}

介绍 steps() 时间函数

你认为我们已经完成计时功能了吗?哈,再想一想,伙计!我告诉过你,CSS定时功能比一些预定义的宽松功能要多得多!

本节,我们可以交换我们的曲线的直线为我们探讨“步进功能的概念,这是通过steps()定时功能的实现。 的steps()功能更多地是一种特殊的工具,但它是有用的工具但有。它让你打破了一个动画的步骤,而不是通常的渐变运动,我们已经习惯了。例如,如果我们想让一个正方形移动400个像素到右边的四个步骤超过4秒,那么正方形将每秒跳到右边的100个像素,而不是连续运动的动画。让我们检查一下语法,我们会为这样一个特殊的例子,这应该是一个绝对的微风,现在我们已经解决的cubic- bezier()功能的复杂性!

查看 Pen Gwbry by Stephen Greig ( @stephengreig ) on CodePen .

div {
   transition: 4s steps(4);
}

div:target {
   left: 400px;
}

正如你所看到的,这是一个简单的陈述问题的步骤把动画分成——但是记住这个数字必须是一个正整数,所以没有底片或小数。然而,第二个可选参数提供我们稍微控制,开始和结束的可能值,后者默认值。

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

值开始运行动画在每一步的开始,而一个价值最终将动画的每一个步骤。使用前面的“移动盒子”的例子,下图做得更好解释这些值之间的差异。

了解CSS3位移时间属性

function")

steps() 开始与结束的不同的显示

你可以看到的价值开始,动画开始就被触发,而价值的目的,它开始的第一步(在这种情况下,后一秒触发)。

为了确保这是真正全面概述,还有两个预定义的关键字()函数的步骤:step-start step-end。前者相当于步骤(开始),而后者是一样的步骤(1)。

用户自定义函数的步数

好的,所以你可能没有太多需要动画移动框的步骤通常,但还有很多其他很酷的 steps() 函数的步骤。举例来说,如果你拥有所有雪碧图的一个基本的动画,那么你可以使用这种技术通过逐帧播放,使用的CSS属性!让我们来看看一个演示和代码,使其正常运转。

查看 Pen tuvfp by Stephen Greig ( @stephengreig ) on CodePen .

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像素),它有一个背景图像(2000像素)包含16帧并排。这个背景图像最初盒子的左边缘充裕,所以,现在我们要做的是将背景图像到左边,这样所有16帧通过小的矩形窗口。与正常的动画帧就会滑的观点随着背景图像在左边;然而,与()函数的步骤,左边的背景图像可以在16个步骤,确保每一个16帧拍摄的视图,根据需要。就像这样,你是玩一个基本卡通仅使用CSS过渡!

了解CSS3位移时间属性

通过“窗口”的概念,此GIF显示背景图像的步骤,让每一帧照片在视线中移动. ( Large version )_

另一个创造性的 steps() 功能,是由Lea Verou发明,想出了一个特别聪明的打字动画,我现在就给你解释一下。

See the Pen Blbcs by Stephen Greig ( @stephengreig ) on CodePen .

首先,你需要一些文本,而且不幸的是,你需要确切知道你要使用多少字符,因为你需要在CSS中使用这个数字。另一个要求是,字体必须等宽,所以所有的文字都是一样宽。

<p>smashingmag</p>

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

我们正在与拥有11个字符的文本。ch CSS单位的帮助下,我们可以使用这个数字来定义段的宽度,虽然我们应该指定一个后备宽度浏览器不支持这个单位。段落然后给一个坚实的黑色边框在右边,这将成为光标。现在一切就绪,我们只需要动画,这非常简单。

需要两个单独的动画:一个用于光标,一个用于打字。要实现前者,我们需要做的就是让黑边框闪烁,这不可能更简单。

@keyframes cursor {
   50% {
     border-color: transparent;
   }
}

.text {
   /* existing styles */
   animation: cursor 1s step-end infinite;
}

正如预期的那样,黑色边界简单地在黑色和透明之间切换,然后连续循环。这就是 steps() 功能至关重要,因为,没有它,光标会淡入淡出,而不是闪烁。

最后,打字动画也一样简单。我们需要做的是将段落的宽度减为0,然后在11个步骤(字符数)之前将其恢复到全宽度。

@keyframes typing {
   from {
      width: 0;
   }
}

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

有了这一个关键帧,文本将显示本身一个信在8秒,而黑色边境(光标)将闪烁不断。这项技术是非常简单但非常有效。

Lea Verou使用了这个新进的优秀 steps() 功能,扭转效应,使文本似乎被删除也不在话下。要做到这一点,只是改变关键帧的关键词,它读取 to 而不是 from ,然后添加一个 animation-fill-mode 参数 forwards 动画`规则。这将确保文本“删除”(即动画完成后),文本将继续被删除。看看下面的演示,看看这个动作。

See the Pen LmohC by Stephen Greig ( @stephengreig ) on CodePen .

这两个例子的缺点出现在本节是你必须知道的帧数或字符之前为了指定正确的许多步骤,如果这个数字变化,那么您将需要改变代码。不过,()函数的步骤已经显示出它的价值,是另一个宏伟的CSS计时的功能函数

The Browser Support Situation

We’ve established that you can’t use a CSS timing function unless the browser supports CSS-based animation — namely, the CSS Transitions and CSS Animation (keyframe-based) modules. Fortunately, support is in pretty great shape these days.

Support for CSS Transitions

Browser Prefixed support Unprefixed support

Internet Explorer N/A 10+

Firefox 4+ ( -moz- ) 16+

Chrome 4+ ( -webkit- ) 26+

Safari 3.1+ ( -webkit- ) 6.1+

Opera 10.5+ ( -o- prefix) 12.1+

尽管所有当前浏览器版本把前缀(棒)的转换,你会明智的还包括webkit -前缀迎合老移动浏览器。我认为需要包括-moz -和o -前缀,但是,已经过去了,只要你逐步增强,你应该做的!

CSS动画支持度

Browser Prefixed support Unprefixed support

Internet Explorer N/A 10+

Firefox 5+ ( -moz- ) 16+

Chrome 4+ ( -webkit- ) Not supported

Safari 4+ ( -webkit- ) Not Supported

Opera 12 ( -o- prefix), 15+ ( -webkit- prefix) 12.1 only (not supported since switch to WebKit)

再次,对关键帧动画,只需要包括 -WebKit- 的前缀。

显然,浏览器支持基于CSS的动画是非常棒的,但是当涉及到时间函数功能的细微差别时,支持稍微有点不同。下表更详细地解释了。

支持时间函数的浏览器

浏览器

基本支持

在0-1范围之外的cubic-bezier()

steps()

Internet Explorer 10+ 10+ 10+

Firefox 4+ 4+ 4+

Chrome 4+ 16+ 8+

Safari 3.1+ 6+ 5.1+

Opera 10.5+ 12.1+ 12.1+

同样,虽然某些浏览器花费了更长的时间来支持所有的功能,但是您可以看到当前浏览器版本支持普遍。

总结

最终,你了解到CSS时间函数多少呢?

  • 他们定义一个动画的加速和减速。
  • 对他们来说,比预定义的关键字更重要。
  • 你可以创建 cubic- bezier() 值在0–1范围以外的反射效果。
  • 你可以执行一个动画通过任何的步骤,而不是一个渐变的运动。
  • 浏览器支持非常棒,而且还在不断改进。

最后,虽然这些技术现在支持一刀切,这不会是一篇关于CSS3技术,如果我没有提到渐进增强。总是从底层工作,也就是说,确保您的工作是可接受的,在设备和浏览器上无法处理这个功能之前,提高浏览器,可以应付他们

最后,希望你能更好的使用贝塞尔曲线。

其他的资源

创建贝塞尔曲线的平台

更多的的贝塞尔曲线文档

更多的信息

(al, ml, il)

查看原文: 了解CSS3位移时间属性

  • dingjikerbo
  • wtowto7207
  • darkdown
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。