在《CSS3的Transition属性》一文中，我们具体讲解了关于CSS3的Transition属性的属性值及其用法，今天我们再来学习一下关于CSS3的Transition属性在各个浏览器的兼容情况。

由于CSS3在国内还不是很流行，所以国内的大部分浏览基本上都不支持CSS3，而且短时间内也没有大面积支持的势头；虽然CSS3在国际上的盛行 度很大，各大浏览器厂商也正在努力的更新他们的浏览器，以求跟上HTML/CSS的更新节奏，但是首先要知道的是CSS3目前还不是一个完整的标准版本， 它仍旧处于开发中，所以期待浏览器能够大部分支持CSS3属性，可能还要在等上一段时间！

补充一句：蛋疼的IE完全没有支持CSS3的念头，这不得不说是一个杯具。

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE 全家都是不支持，另外由于各大现代浏览器Firefox，Safari，Chrome，Opera都还不支持W3C的标准写法，所以在应用 transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的 transition属性，那么这种效果就会自动加上去：

//Mozilla内核<style type=”text/css”>
-moz-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//Webkit内核
-webkit-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//Opera
-o-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//W3C 标准
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

通过上面的讲述，我想大家对CSS3的Transition属性的使用有一定的概念存在了，下面为了加强大家在这方面的使用，我们一起来看下面的DEMO（演示案例）。我们通过实践来巩固前面的理论知识，也通过实践来加强transition的记忆。

DEMO：

演示案例中我们主要是在一个div中放置了几个小块，分别是对应了transition-timing-function中的几种类型，我们在 div的hover状态下，改变其部分属性，从而达到一种动画效果。我们也可以使用JQuery来点击一个按钮，触发这个div（说简单点就是通过按钮的 点击事件给这个div加上一个class，让其子元素都触发相对应的transition动画效果），为了让大家能更好的学习和理解，我把相应的代码贴在 这里，感兴趣的朋友就跟着做一下吧，也可以直接把代码复制到你本地页面运行查看效果。

HTML代码：

<a id=”timings-demo-btn”>click</a>
<div id=”timings-demo”>
<div id=”ease”>Ease</div>
<div id=”ease-in”>Ease-in</div>
<div id=”ease-out”>Ease-out</div>
<div id=”ease-in-out”>Ease-in-out</div>
<div id=”linear”>Linear</div>
<div id=”cubic-bezier”>Cubic-bezier</div>
</div>

#timings-demo {border:1px solid #ccc; padding:10px; height:400px; width:400px;}
.demo-box {width:100px; height:50px; text-align:center; line-height:50px; text-align:center; color:#fff; background:#96c; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:inset 0 0 5px rgba(102, 153, 0,0.5); -webkit-box-shadow:inset 0 0 5px rgba(102, 153, 0,0.5); box-shadow:inset 0 0 5px rgba(102, 153, 0,0.5); margin-bottom:10px; }
//ease效果：
#ease-in {-moz-transition:all 3s ease-in 0.5s; -webkit-transition:all 3s ease-in 0.5s; -o-transition:all 3s ease-in 0.5s; transition:all 3s ease-in 0.5s; background:#369; }</style>
//ease-out效果：
#ease-out {-moz-transition:all 5s ease-out 0s; -webkit-transition:all 5s ease-out 0s; -o-transition:all 5s ease-out 0s; transition:all 5s ease-out 0s; background:#636; }
//ease-in-out效果：
#ease-in-out {-moz-transition:all 1s ease-in-out 2s; -webkit-transition:all 1s ease-in-out 2s; -o-transition:all 1s ease-in-out 2s; transition:all 1s ease-in-out 2s; background:#3e6; }
//linear效果：
#linear {-moz-transition:all 6s linear 0s; -webkit-transition:all 6s linear 0s; -o-transition:all 6s linear 0s; transition:all 6s linear 0s; background:#999; }
//cubic-bezier效果：
#cubic-bezier {-moz-transition:all 4s cubic-bezier 1s; -webkit-transition:all 4s cubic-bezier 1s; -o-transition:all 4s cubic-bezier 1s; transition:all 4s cubic-bezier 1s; background:#6d6; }
//hover状态下或单击click按钮后demo-box产生属性变化
#timings-demo.timings-demo-hover .demo-box, #timings-demo:hover .demo-box {-moz-transform: rotate(360deg) scale(1.2); -webkit-transform:rotate(360deg) scale(1.2); -o-transform:rotate(360deg) scale(1.2); transform:rotate(360deg) scale(1.2); background:#369; border:1px solid rgba(255,230,255,08); -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; margin-left:280px; height:30px; line-height:30px; margin-bottom:15px; }

$(document).ready(function(){
$(“#timings-demo-btn”).toggle(
function(){
$(this).next(“div#timings-demo”).addClass(“timings-demo-hover”);
},function(){
$(this).next(“div#timings-demo”).removeClass(“timings-demo-hover”);
});
});

上图是鼠标移动到#timings-demo的div产生的效果变换示意图，你单击“click”按钮同样会产生上面的一个动画效应，为了节约空间，这里不在贴出示意图了。

到这里，关于CSS3的transition属性的属性解析及案例演示已经全部完成了。

结束语：CSS3的强大让人感到惊讶，也让人感到惊喜。关于CSS3的优秀，我想我已经不用多做介绍了，简简单单的几句代码就能够完成CSS2.0 之前必须用图片才能解决的事情是多么的令人振奋。我想作为前端工程师的我以及广大的前端程序员们，还等什么？赶紧使用CSS3吧，它会给你带来意想不到的 精彩。

原文：http://www.52maomao.info/css3-transition-browser-compatibility.html