CSS3（过渡）

不同浏览器的内核和前缀

Chrome(谷歌浏览器) ：WebKit内核 -webkit-
Safari(苹果浏览器) ： WebKit内核 -webkit-
Firefox(火狐浏览器) ： Gecko内核 -moz-
Opera(欧朋浏览器) ： Presto内核 -o-
IE(IE浏览器) ： Trident内核 -ms-

CSS3过渡

兼容：IE10+ ，Firefox16+，Chrome26+，Safari6.1+，Opera12.1+

过渡可以在鼠标单击，获得焦点，被点击或对元素任意改变触发。。 网页加载不会触发。

1. transition-property（指定过渡属性的名称）

语法

transition-property:元素属性名\all/*所有属性名*/;/*默认值none没有属性改变*/

2. transition-duration（持续时间）

语法

transition-duration:m/*秒*/sm/*毫秒*/0/*默认值*/;

3. transition-timing-function（过渡类型）

值	意	-
linear	线性过渡（匀速运动）	相对不错
ease	平滑过渡（慢加速，速度越快增加越慢）	结束生硬
ease-in	由慢到快	结束生硬
ease-out	又快到慢
ease-in-out	又慢到快再到慢	更适合

语法

transition-timing-function:linear;

4. transition-delay（过渡延迟）

语法

transition-delay:m/*秒*/sm/*毫秒*/0/*默认值*/;

5.transition（过渡简写）

语法

transition-delay:property/*属性名*/ duration/*持续时间*/ timing-function/*过渡类型*/ delay/*过渡延迟*/;