css3 动画系列（二）

接着上面一篇，我们继续聊聊css3动画；

今天主要说说transition这个属性；

以往我们做一个鼠标移上去显示隐藏的动画效果，都要借助jq中animate,fadeIn,slideDown之类的方法，如果我们使用css3中transition的这个属性的话完全不需要再写js代码了。只需要css代码就可以轻松搞定；

第一个列子——渐隐渐现

<div class="fade">
    <div class="btn-fade">click me</div>
    <div class="fade-box"></div>
</div>

.fade{
    position:relative;
}
.btn-fade{
    padding:5px 10px;
    border:1px solid #e1e1e1;
    color:#999;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    display:inner-block;
}
.fade-box{
    position:absolute;
    left:0;
    top:100%;
    z-index:9;
    height:100px;
    width:100px;
    background:#ff0000;
    opacity:0;
    fliter: