transition的唧唧歪歪

transition是css3新出的一个属性，大白话叫作过渡。

主要有下面这四个属性：

transition-property、transition-duration、transition-timing-function、transition-delay（我作了四个预览效果，点击可查看）

大白话分别是，须要过渡的属性，所用时间，时间曲线（或者说过渡速度？），还有最后的就叫作延迟。

注意：Internet Explorer 10, Firefox, Opera, Chrome, 和Opera 支持transition 属性。Safari 须要前缀 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 属性。Chrome 25 以及更早的版本，须要前缀 -webkit-

好了，我们来一个一个说。首先是transition-property这个，它规定的是过渡属性的名称，好比宽度（width）、颜色（color）等等，也能够是全部（all），甚至是没有（none）；

transition-property效果以下：

过渡的是宽度

过渡的是背景颜色

而后说这个所用时间transition-duration，单位能够是秒（s），也能够是毫秒（ms）；

transition-duration效果以下：

过渡1秒

过渡5秒

时间曲线transition-timing-function这个属性是很奇妙的一个属性，它涉及到一个“贝塞尔曲线（cubic-bezier）“的概念，在这用张图给你们说一下：

这张图就是贝塞尔曲线（黑长粗），横向是时间，纵向是完成度，图中有四个点P0、P一、P二、P3，P0和P3是固定的点，P1和P2是可操做的点，设置的四个数值前两个是P1的坐标，后两个是P2的坐标，四个值的需是0～1之间（包括0和1），而后生成的这个贝塞尔曲线就是时间曲线了。

注：时间曲线有几个首选值，分别是：

• linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
• ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
• ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
• ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

 

这里还有一个特殊属性：steps，格式是这样的：

steps(<integer>[,[start|end]]) —— 这个属性写出来是这样：

transition-timing-function: steps(3, start);

还有这样：

transition-timing-function: steps(3, end); 

简单来讲这个效果相似于蹦蹦跳跳的完成过渡，第一个数字是说跳几回，第二个参数是说在什么时候跳，具体仍是看效果吧，我嘴笨……

transition-timing-function效果以下：

贝塞尔曲线1,0,0,1

贝塞尔曲线0,1,1,0

steps(3, start)

steps(3, end)

最后一个是延迟transition-delay，就是多久以后开始，默认是0，单位是秒（s）或者毫秒（ms）。

transition-delay效果以下：

2秒延迟

无延迟

全部案例文件在这

效果集合在这