1.transition的浏览器支持情况
2. 还是一步一步说说怎么用transition吧
页面只有一个div，其css如下：
1 <style type="text/css"> 2 div { 3 width:100px; 4 height:30px; 5 background-color:#FF9900; 6 } 7 div:hover { 8 width: 300px; 9 } 10 </style> 鼠标移动到div上，div立刻变宽为300px，效果如下：
现在在div身上加上 transition:0.5s;
1 <style type="text/css"> 2 div { 3 width:100px; 4 height:30px; 5 background-color:#FF9900; 6 /* 加上这个，让变化慢一点 */ 7 transition: 0.5s; 8 } 9 div:hover { 10 width: 300px; 11 } 12 </style> 效果如下：
原来是瞬间，现在div的css样式中加入了transition属性，变成了缓慢的动画了。那么问题来了，如下：
3.transition写在哪？
将div里的transition:0.5s删掉，放在div:hover中，（css代码略）效果如下
鼠标放在上面，效果还好，慢慢伸长，鼠标一松，立刻变短，没有过渡效果。为什么？
因为div:hover状态时，有这个transition属性，而div由短变长中，给个过渡，就有动画。当鼠标离开div，不是hover状态了，div没有transition属性，所以，立刻变短。
既然是变化，那就至少涉及到两个状态，变化前的状态，变化后的状态。两个状态不一样，然后给予慢镜头过渡。就形成了动画。
也就是说：你想让谁的变化具有动态过渡的效果，那transition属性就加在谁身上，还要加的让变化前后两个状态，都能有transition属性（要知道，div:hover时，也可有获取到div中的属性，反过来就不行了）。
在这里，变化前是div，变化后div:hover，两个显示出来不同。鼠标移动触发的动画效果。那么这就有个问题了，如下：
4.怎么触发transition动画？
还可以通过js触发，比如说：js控制div增加个class为donghua，那么，页面中该div多个class,其属性要变，如果设置过transition，那就会有动画效果。这么理解吧：浏览器发现该div变成div.donghua了，而且发现形状大小色彩等前后不一样了，给前后状态变化的过程来个慢镜头，就形成了动画。