用css3-tranistions实现平滑过渡

Css tranistions允许元素的属性在单位时间内发生平滑的过渡，在阅读完《CSS Transitions Module Level 3》之后，我已经被其所吸引。尽管目前只有chrome和safari浏览器支持该属性（不过目前还得使用-webkit内核关键字作为前缀），但相信在不久的将来，各主流浏览器会全面支持该属性。

通常情况下，当css属性发生改变时，元素会立刻发生改变。Css　transtions提供一种方法使得元素从原始状态平滑的过渡到新的状态。只需要对元素定义要使用transition效果的属性（transition-property）、transition效果的过渡时间（transition-duration）、transition效果的过渡方式（transition-timing-function）以及transition效果何时开始（transition-delay）。在详细了解这些属性之后，我作了一个简单的测试，虽说简单，但总能鼓动人心。

我只是定义一个绝对居中的盒子，在鼠标滑过时将其放大，在chrome中我们会看到平滑的过渡效果。Css规则如下：

.transition{     
opacity:0.2;     
position:absolute;     
left:-65px;     
top:-65px;     
left:50％;     
top:50％;  
border:1px solid #000;     
background-color:#f00;    
padding:30px;   
width:100px;     
height:100px;   
-webkit-transition-property:opacity,width,height,margin-left,margin-top,padding,border-width;   
-webkit-transition-duration:1s; 
-webkit-transition-timing-function:ease-in-out; 
} 
.transition:hover{     
width:300px;height:300px;border-width:3px;margin-top:-195px;margin-left:-195px;opacity:1;padding:90px; }

在-webkit-transition-property定义了使用过渡效果的属性，-webkit-transition-duration定义过渡持续的时间，这里我定义的1s。W3c的规则中说明，当把-webkit-transition-duration的属性值定义为0时，将不会出现平滑的过渡。-webkit-transition-timing-function定义了过渡的方式，这里是ease-in-out，关于其它方式，可以参看文档说明。有了这样一个属性之后，用户可以得到良好的体验，我们也不必要在为实现这样的平滑的效果而去写大量的js。下面我构建一个Image gallery，来看看该属性所带来的用户体验。

如何排列图片，我不赘述。熟悉css的人都很清楚怎么做，我只介绍实现transition效果的核心css代码。

.imageGallery li{display:block;width:200px;height:136px;margin:15px;float:left;_overflow:hidden;} 
.imageGallery li img{ 
   width:200px; 
    height:136px; 
    border:1px solid #000; 
   position:relative; 
   z-index:1000; 
    -webkit-transition-property:width,height,margin-left,margin-top,border,left,top,z-index; 
   -webkit-transition-duration:1s; 
   -webkit-transition-timing-function:ease-in-out; 
} 
.imageGallery li a:hover{_background-color:#fff;_z-index:5000;_position:relative;} 
.imageGallery li a:hover img{ 
    border:2px solid #000; 
    width:600px; 
    height:408px; 
    margin-left:-301px; 
    margin-top:-255px; 
    left:50％; 
    top:50％; 
    z-index:5000; 
}

上面的.imageGallery li a:hover那行代码以及.imageGallery li的overflow属性，主要修复IE6下的bug。给imageGallery li定义overflow:hidden，可以看到很有趣的效果。

看看最终结果transitions-image-gallery.htm ，可以看到，我们再也不必为这样一个平滑的过渡效果而去写大量的js了，期待css transition能很快得到主流浏览器的支持。