第19讲：transition属性

官方解释：使元素在设置的两个值之间平缓过渡。通俗解释：用来设定滑溜地过渡效果。示例视频： [video width="480" height="340" mp4="/img/2016/03/transition.mp4"][/video] 本示例中的样式表如下：

div {
	width: 200px;
	height: 100px;
	transition: .6s;
	background-color: rgba(121,162,42,1.00); /* 绿色 */
}
div:hover {
	width: 300px;
	height: 200px;
	background-color: rgba(241,167,29,1.00); /* 橙色 */
}

默认尺寸为200x100，绿色的一个容器。鼠标滑过的时候变成300x200，橙色的容器。在默认状态下设置transition: .6s声明，使其在鼠标滑过的时候在0.6秒时间内进行平缓过渡。道理就是这么简单。下面进行深入讲解。

简写语法

transition: property duration timing-function delay|initial|inherit;

翻译一下吧：

transition: 属性 持续时间 过渡方式 延迟执行时间|不继承|继承;

刚开始的例子中只有一个.6s的一个值。指的就是过渡时间。其它值虽然没写，但都是默认值。

非简写语法(以上面的例子为例)

transition-property:all；
transition-duration:0.6s；
transition-timing-function:ease；
transition-delay:0s；

每个属性呢都有它详细的值可供选择。对于初学者来说，会设置过渡时间就可以了。更多的用法，大家可以在网上自学。我就引路到这里了。

兼容模式

transition属性是css3的属性。就是一个较新的样式表属性。虽然已经运用好几年了。但问题是依然会有很多用户使用着比较老的电脑。系统也有可能是windows xp以及老的浏览器。为了让这个属性兼容更老一点的浏览器。我们需要对这个属性增加特定前缀让更老一点的浏览器支持该效果。下面的方法，不只是对transition属性，对其它的css3的属性，都适用。

-webkit-transition:0s; /* 针对老版本的谷歌浏览器（chrome浏览器），苹果浏览器（safari浏览器），以及国内的某些双核心（IE核心+webkit核心）浏览器 */
-moz-transition:0s; /* 针对老版本的火狐浏览器（firefox浏览器）*/
-o-transition:0s; /* 针对老版本的欧朋浏览器（opera浏览器）*/
-ms-transition:0s; /* 针对老版本的IE浏览器（IE9及以上）*/

但，HTML5标准当中，是不建议用这种前缀的。但为了获得更好的兼容性。写上更好。也不算是错误。所以，对于本文的例子。最稳妥的写法就是：

div {
	width: 200px;
	height: 100px;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -o-transition: .6s;
    -ms-transition: .6s;
	transition: .6s;
	background-color: rgba(121,162,42,1.00); /* 绿色 */
}
/* 此处省略很多代码 */

需要注意的是，不带前缀的代码一定要写在最下面。为了渲染性能。

第19讲：transition属性

简写语法

非简写语法(以上面的例子为例)

兼容模式

相关英语