Html5的CSS3的transition实现简单动画效果

运行的效果如下：



当鼠标移动时，实现宽度变化的动画效果





Html部分代码如下：

<div >
<table class="listTable" border="1" >
<tr>
<td >
<div class="prctPic prctPic01"></div>
<div class="prctName">标题党</div>
<div class="prctInfo">内容</div>
</td>
<td >
<div class="prctPic prctPic02"></div>
<div class="prctName">标题党</div>
<div class="prctInfo">内容</div>
</td>
<td >
<div class="prctPic prctPic03"></div>
<div class="prctName">标题党</div>
<div class="prctInfo">内容</div>
</td>
<td >
<div class="prctPic prctPic04"></div>
<div class="prctName">标题党</div>
<div class="prctInfo">内容</div>
</td>
</tr>
</table>
</div>

CSS代码如下：

.listTable{width:100%;height:260px;border:0px none #e3e3e3;border-collapse:separate;border-spacing:0px;}
.listTable td{width:100px;border:1px solid #e3e3e3;position:relative; transition:width 0.3s ease-in 0s;}
.listTable td:hover{width:300px;}
.listTable td div{position:absolute;left:0px;width:100%;}
.listTable td .prctPic{height:260px;bottom:0px;}
.listTable td .prctName{font-size:23px;color:#05192a;text-align:center;top:10px;}
.listTable td .prctInfo{font-size:14px;color:#FFFFFF;text-align:center;top:56px;}

.listTable td .prctPic.prctPic01{background:#F90;}
.listTable td .prctPic.prctPic02{background:#F66}
.listTable td .prctPic.prctPic03{background:#F3C}
.listTable td .prctPic.prctPic04{background:#96F}

transition:width 0.3s ease-in 0s;

包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。

// Mozilla内核： -moz-transition

// Webkit内核：-webkit-transition

//Opera：-o-transition

//W3C 标准：transition

注：IE不支持的.

------记录完毕-----------