transition探究：
CSS3的transition属性简介：
W3C标准中对CSS3的transition是这样描述的：“CSS的transition允许CSS的属性值在一定的时间区间内平滑的过渡，这种效果可以在鼠标单机、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS的属性值，如颜色、大小等等。
Transition主要包含四个属性：
transition-property：执行变换的属性，其有三个属性值，分别为none、all（默认）与indent（元素属性名），其中none表示没有属性改变，all表示所有的全改变，indent为可以指定元素的某一个属性值
transition-duration：变换延续时间，单位为ms与s，可以用于所有元素，包括:before和:after伪元素，默认值为0，也就是变化是及时的。
transition-delay：变换延迟时间。用来指定一个动画执行的时间，也就是当元素属性改变后，多长时间开始执行transition，取值为ms与s，默认值为0，同样可用于所有元素。
transition-time-function：变换的速率变化，有6个可能值：ease（逐渐变慢）默认值，ease函数等同贝塞尔曲线(0.25,0.1,0.25,1.0)。linear（匀速），linear函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0)。ease-in加速，ease-in函数等同于贝塞尔曲线(0.42,0,1.0,1.0)。ease-out减速，ease-out函数等同于贝塞尔曲线(0,0,0.58,1.0)。ease-in-out（先加速再减速），ease-in-out函数等同于贝塞尔曲线(0.42,0,0.58,1.0)，subic-bezier（该值允许你自定义个时间曲线），特定的时间取消，取消格式如上，若不定义，此设置无效。
有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为transition-duration第二个为transition-delay。如：
a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}
若想要给元素执行所有的transition效果的属性，那么可以用all属性，也是其默认属性，此时，他们共用相同的延续时间、速率变化方式等，如：
a {
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
注：目前来说虽然各大主流浏览器都支持了transition，不过各自对其属性的命名却不相同，所以在应用transition时我们有必要加上各自的前缀，最好再放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去。
W3C标准：transition
Webkit内核: -webkit-transition
Opear内核: -o-transition
Mozilla内核：-moz-transition
IE内核（IE10）：-ms-transition
实例代码：
<!doctype html>
<html>
<head>
<style>
#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 {
-moz-transition: all 5s ease 0.3s;
-webkit-transition: all 5s ease 0.3s;
-o-transition: all 5s ease 0.3s;
transition: all 5s ease 0.3s;
background: #f36;
}
#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;
}
#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 {
-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 {
-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 {
-moz-transition: all 4s cubic-bezier(0.42,0,1.0,1.0) 1s;
-webkit-transition: all 4s cubic-bezier(0.42,0,1.0,1.0) 1s;
-o-transition: all 4s cubic-bezier(0.42,0,1.0,1.0) 1s;
transition: all 4s cubic-bezier(0.42,0,1.0,1.0) 1s;
background: #6d6;
}
#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;
}
</style>
</head>
<body>
<div id="timings-demo">
<div id="ease" class="demo-box">Ease</div>
<div id="ease-in" class="demo-box">Ease-in</div>
<div id="ease-out" class="demo-box">Ease-out</div>
<div id="ease-in-out" class="demo-box">Ease-in-out</div>
<div id="linear" class="demo-box">Linear</div>
<div id="cubic-bezier" class="demo-box">Cubic-bezier</div>
</div>
</body>
</html>