transition过渡效果

是一个元素有一个状态变成另一个状态的css动画效果

transition:css的一个属性 时间，一个属性 时间，一个属性 时间。。。。；

在刚开始的时候要设置它初始的那个属性，然后在一段时间内属性变成什么样的。

比如.a{color:red;background：#ccc；transition:color 2s background  3s;}

.a:hover{color:blue;background：#fff；}它就会在2s之内把a的颜色有红色变成蓝色，3s内把背景色由ccc变成fff。两个动画是同时进行的。

注意transition是有兼容性的，所以需要写4个，

transition{}  

-moz-transition{}    火狐浏览器

-webkit-transition{}  谷歌和safari浏览器

-o-transition{}   opera浏览器

也可以写，transform的属性，让它缩放scale(2)，旋转rotate(180deg),平移translate(x,y)，倾斜skew(x-deg,y-deg)

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}