html过渡的触发机制是什么,CSS3过渡 transition

之前我们整理了CSS3中的动画属性 Transform 转换，今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡。

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

CSS3 过渡

下面我们就从语法和属性值，开始来学习transition的具体使用

transition 语法:

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

或

transition ： [ || || || ][, [ || || || ]]*

[注意] IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法。

transition是一个复合属性, 适用于所有元素，包含伪对象:after和:before。通过下面这四个子属性的配合来完成一个完整的过渡效果。

transition-property: 过渡的属性 (默认值为all)

transition-duration: 过渡的持续时间 (默认值为0s)

transiton-timing-function:过渡的动画类型 (默认值为ease函数)

transition-delay:过渡的延迟时间 (默认值为0s)

transition-property 过渡属性

语法：

transition-property: none | all | [ property ] [ ,property ]*

transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时，过渡效果将开始)。

其主要值有：none(没有属性改变)，all(所有属性改变)这个也是其默认值，property(元素属性名)。

当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，property是可以指定元素的某一个属性值。如果提供多个属性值，以逗号进行分隔。

实例：transition-property: width ,background;

CSS3 过渡

[注意] 请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition-duration 过渡持续时间

语法：

transition-duration: [ , ]*

transition-duration是用来指定元素过渡的持续时间，取值：为数值，单位为s(秒)或者ms(毫秒)。其默认值是0s，也就是过渡时是即时的。如果提供多个属性值，以逗号进行分隔。

transition-timing-function 过渡的动画类型

语法：

transition-timing-function：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

或

transition-timing-function：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*

取值：

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，它有6个可能值：

1、ease：平滑过渡(逐渐变慢)默认值，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：线性过渡(匀速)，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：由慢到快(加速)，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：由快到慢(减速)，等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：由慢到快再到慢(加速然后减速)，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：(该值允许你去自定义一个时间曲线)， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

ease

linear

ease-in

ease-out

ease-in-out

其是cubic-bezier为通过贝赛尔曲线来计算“过渡”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

其他几个属性的示意图：

如果要凭脑子空写出贝赛尔函数的代码，可能比较困难。好在不用你自己去计算，可以到工具网站(如贝赛尔立方)上自动生成想要效果的代码。你也可以在该站点上，体验一把linear，ease，ease-in，ease-out，ease-in-out间的差异。

transition-delay 过渡的延迟时间

语法：

transition-delay: [ , ]*

transition-delay 用来指定一个过渡动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：为数值，单位为s(秒)或者ms(毫秒)，其使用和transition-duration极其相似。默认大小是”0s”，也就是变换立即执行，没有延迟。

触发过渡的方式

常见的就是伪类触发:hover，:active，:focus，:checked等。还有例如@media媒体查询，根据设备大小，横屏竖屏切换时触发。还有，如click，keydown等JS事件触发，页面加载也能触发就不一一列举了。

1、:hover 鼠标悬停触发，实例：

触发

2、:active 用户单击元素并按住鼠标时触发，实例：

触发

3、:focus 获得焦点时触发，实例：

4、@media触发 符合媒体查询条件时触发，实例：

触发

5、点击事件 用户点击元素时触发，实例：

触发

总之过渡的本质是在时间段内平滑过渡属性值，与怎么触发没有关系。