CSS3详解之transition
W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。””
浏览器兼容：
目前浏览器支持情况：Safari、 Chrome 、Firefox、Opera、IE10+
接下来我们一起来看看CSS3中transition具体如何实现，首先从transition的语法说起。
语法：
transition ： [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*
具体简写说明：
transition:property duration timing-function delay;
上面transition 属性是一个简写的属性，主要包含四个过渡属性：
1、transition-property ; //执行变换的属性比如transition-property:backgrond 就是指backgound参与这个过渡
2、transition-duration //变换延续的时间
3、transition-timing-function //在延续时间段，变换的速率变化,也就是指定过渡类型
4、transition-delay //变换延迟时间
下面分别来分析这四个属性值：
一、transition-property
语法：
transition-property: none || all || property;
1、 none: 没有属性改变；
2、 all: 所有属性改变,这个也是其默认值；
3、 property: 元素属性名。可以定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
当其值为none时，transition马上停止执行。
当指定为all时，则元素产生任何属性值变化时都将执行transition效果。
property是可以指定元素的某一个属性值。
二、transition-duration
语法：
transition-duration:time;
transition-duration是用来指定元素转换过程的持续时间，取值：time为数值，规定完成过渡效果需要花费的时间（以秒或毫秒计）,可以作用于所有元素，
包括:before和:after伪元素。其默认值是0，意味着不会有效果，也就是变换时是即时的。
三、transition-timing-function:
语法：
transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-bezier(n,n,n,n);
取值：
transition-timing-function该属性允许过渡效果随着时间来改变其速度，有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，也就是先慢后快，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），也就是先快后慢，ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），也就是先慢后快再慢，ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
更多深入理解可以查看：深入理解CSS过渡transition
四、transition-delay:
语法：
transition-delay：time;
transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，
其取值：time为数值，以秒或毫秒计，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是”0″，也就是变换立即执行，没有延迟。
有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的值为transition-duration，第二个为transition-delay。如：
a:hover{
-moz-transition: background 0.4s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.4s ease-in,color 0.3s ease-out;
transition: background 0.4s ease-in,color 0.3s ease-out;
}
下面我们来看一下具体示例：
demo公用的css为：
.wrap-bg{
width:600px;
height:480px;
background:#f6f6f6;
margin-left:50px;
}
.wrap-bg div{
width:100px;
height:50px;
text-align:center;
margin-top:30px;
line-height:50px;
color:#fff;
}
不同transition-timing-function类型的动画
html:<div class="wrap-bg">
<div class="demo ease">ease</div>
<div class="demo linear">linear</div>
<div class="demo ease-in">ease-in</div>
<div class="demo ease-out">ease-out</div>
<div class="demo ease-in-out">ease-in-out</div>
<div class="demo cubic-bezier">cubic-bezier</div>
</div>
css:
.ease{
background:#F05033;
-moz-transition:box-radius 3s ease 0.5s;
-webkit-transition:box-radius 3s ease 0.5s;
transition:box-radius 3s ease 0.5s;
}
.linear{
background:#2D89EF;
-moz-transition:all 3s linear 0.5s;
-webkit-transition:all 3s linear 0.5s;
transition:all 3s linear 0.5s;
}
.ease-in{
background:#2B5797;
-moz-transition:all 3s ease-in 0.5s;
-webkit-transition:all 3s ease-in 0.5s;
transition:all 3s ease-in 0.5s;
}
.ease-out{
background:#B91D47;
-moz-transition:all 3s ease-out 0.5s;
-webkit-transition:all 3s ease-out 0.5s;
transition:all 3s ease-out 0.5s;
}
.ease-in-out{
background:#603CBA;
-moz-transition:all 3s ease-in-out 0.5s;
-webkit-transition:all 3s ease-in-out 0.5s;
transition:all 3s ease-in-out 0.5s;
}
.cubic-bezier{
background:#000;
-moz-transition:all 3s cubic-bezier 0.5s;
-webkit-transition:all 3s cubic-bezier 0.5s;
transition:all 3s cubic-bezier 0.5s;
}
/**hover触发**/
.wrap-bg:hover .demo{
background:#f60;
-moz-transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
transform: rotate(360deg) scale(1.2);
border:1px solid rgba(255,230,255,08);
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
margin-left:500px;
}
效果:（鼠标hover上灰色背景层可以显示效果）
