CSS3里有一个新东西，叫做transition，它可以实现许多属性改变时的动画效果。比如width改变，shadow改变等等。他有几种浏览器兼容性写法（以0.6秒动画为例）：

 -webkit-transition: 0.6s;
 -moz-transition: 0.6s;
 -ms-transition: 0.6s;
 -o-transition: 0.6s;
 transition: 0.6s;

IE要在10或以上才可以，其它主流浏览器基本都支持。上面的CSS样式写在某个类里面，当某些属性改变时，这些改变就会以0.6s长的动画来显示效果。那么哪些效果才可以触发transition的效果呢？

表来源于W3C Transition

当上面的属性改变时，都会触发transition 的效果。那transition一共有多少种变化效果呢？这得从transition的具体用法来看。

transition-property
transition-duration
transition-timing-function
transition-delay

第一个是定义transition的触发属性，也就是设定哪些属性改变时，transition生效，默认是all，也就是上边任何列出的属性变动时，都会触发transition效果。

第二个是定义transition效果的时间，最开始的例子就是0.6s的时间，比如改变一个元素的长度，想让他慢慢用时2s时间来变长，那就把duration设定为2s。

第三个是定义效果变化时间的速率，这个的实现较为复杂，但从使用者来说简单易用，它提供了几种速率变化方式：

1. linear，匀速变化。
2. ease，逐渐变慢，默认值就是这个。
3. ease-in，加速变化。
4. ease-out，减速变化。
5. ease-in-out，先加速再减速。
6. cubic-bezier，自定义变化函数。

其实每种变化函数都是用贝塞尔曲线来计算的，有兴趣的可以看这里。这个东西没研究过，感觉十分复杂。这里的变化速率就是指在规定的duration时间内，动画变得快慢。其中ease就是默认的值。

第四个是定义执行transition效果前要延迟多少时间。比如设置2s，就是在执行变化前要延迟2秒钟。默认是0。

假如想定义多个属性的变化效果，中间用 “ , ” 隔开就可以，如：

    -moz-transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;
    -webkit-transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;
    -o-transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;
    transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;

下面说一个常用的效果，淡入淡出的实现。

通常隐去一个元素用的较多的就是display：none，虽然opacity：0可以让元素不见，但其实它还是存在于页面上的，如果操作不当还会挡住用户鼠标等事件的抓取。visibility属性也可以隐去一个元素，可能还有一些别的方法，但这几种对我来说是较为常用的。这些具体的区别先不说，我们就来看他们怎么与transition搭配来实现淡入淡出。

用display：none的方法隐去一个元素，当条件触发时，我们再用display：block把它显示出来。这种方法可以实现“快入快出”，但不会触发transition效果，opacity可以触发transition效果，但是隐去之后那个元素就要显示在页面上，只不过为透明，这样方法也不好。visibility直接设置visible和hidden是不会出发transition效果的，但我们看到上面的适用属性里就有visibility，查看W3C说明，原来是要用贝塞尔曲线自定义timing，直接设置visible，hidden不可以，直接设置0，1的话CSS又不识别。那我们把他们放到一起组合着用会怎么样呢。

.nav-bar {
   -webkit-transition: 0.6s;
   -moz-transition: 0.6s;
   -ms-transition: 0.6s;
   -o-transition: 0.6s;
   transition: 0.6s;
   visibility: 0;
   opacity: 0;
}

先这样初始化一个元素，然后当条件触发时，我们用Javascript或JQuery给它加上新的CSS即 “visibility: 1; opacity:1”。这样就很好的实现了transition的淡入淡出效果。如果换成display：none和opacity：0的方法呢，实验后，发现会出现transition的效果，但是极不稳定，有时候会正常显示，更多时候是直接出现或抖动。但还有个方法可以解决，就是用SetTimeout函数来延迟执行display：block后的属性操作，比如这里就是设置opacity：1，这样就可以实现了淡入淡出。但就个人来言，我用的较多的还是visibility和opacity的方法。

能实现淡入淡出的一定还有很多方法，大不了直接上Javascript硬写。不过有CSS3提供的这么好的动画效果，干嘛不用呢。

Reference：http://www.w3.org/TR/css3-transitions/#animtype-visibility