本文共 2305 字，大约阅读时间需要 7 分钟。

通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上，2.规定效果的时长

1.语法：

transition: property duration timing-function delay;

2.参数说明：

1. transition-property：规定设置过渡效果的css属性名称
2. transition-duration：规定过渡效果需要多少秒或毫秒
3. transition-timing-function：规定过渡效果的过渡曲线
4. transition-delay：定义过渡效果何时开始

3.transition-timing-function值：

1. linear：规定以相同速度（匀速）开始至结束的过渡效果
2. ease：慢速开始 然后变快 然后慢速结束
3. ease-in：慢速开始
4. ease-out：慢速结束
5. ease-in-out：慢速开始和结束
6. cubic-bezier(n,n,n)：在cubic-bezier(n,n,n)函数中定义自己的值（可能的值是0到1之间的数值）

4.案例说明

div{       width: 200px;    height: 200px;    background-color: red;    /*添加单个过渡效果*/    /*transition:background-color 2s;*/    /*也可以同时设置多个过渡效果*/    /*transition:background-color 2s,left 1s;*/    /*可以设置某个过渡效果的延迟*/    /*transition:background-color 2s,left 1s 1s;*/    /*可以设置过渡效果的速率曲线*/    /*transition:background-color 2s,left 1s ease-out 1s;*/    /*还可以一次性的为所有属性添加过渡效果(不建议这样使用)*/    transition:all 1s;    position: absolute;    left: 0;    top: 0;}

5.为多个样式添加过渡效果

transition:left 1s,color 2s;

6.让过渡效果分为指定的几步来完成

transition:left 1s steps(4);

7.浏览器兼容

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去，如

-moz-transition: all 5s ease 1s;-webkit-transition: all 1s ease 1s;-o-transition: all 1s ease 1s;transition: all 1s ease 1s;

8.手风琴案例

鼠标放到标题栏，下方对应的内容区域展开，并带有过渡效果。

代码：

  
     
     
         
   
    
    
      
     
1
      
     
              1111111111111111111111111111111111111111        1111111111111111111111111111111111111111        11111111111      
     
    
    
    
    
      
     
2
      
     
              2222222222222222222222222222222222222222        2222222222222222222222222222222222222222        2222222222222222222222222      
     
    
    
    
    
      
     
3
      
     
              3333333333333333333333333333333333333333        3333333333333333333333333333333333333333        33333333333333333333333333333333333      
     
    
    
    
    
      
     
4
      
     
              4444444444444444444444444444444444444444        4444444444444444444444444444444444444444        4444444444444444444444444444444444444444      
     
    
    
  
   

web前端交流QQ群：327814892

转载地址：http://cxri.baihongyu.com/