CSS3动画效果-transition

前面的话

通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识

---

1.transition的浏览器支持情况

IE10+支持，IE6\7\8\9都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀 -webkit- 之类的了

2.还是一步一步说说怎么用transition吧

页面只有一个div，其css如下：

<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;

 <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;
1