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:alpha(opacity=0);
    -webkit-transition:opacity 2s;
    -moz-transition:opacity 2s;
    transition:opacity 2s;
}
.btn-fade:hover +.fade-box{
    opacity:1;
    fliter:alpha(opacity=100);
}

第二个列子——从左至右

.fade-box{
    position:absolute;
    left:0;
    top:100%;
    z-index:9;
    height:100px;
    width:0;
    background:#ff0000;
    -webkit-transition:width 2s;
    -moz-transition:width 2s;
    transition:width 2s;
}
.btn-fade:hover +.fade-box{
    width:100px;
}

第三个列子——从上至下

.fade-box{
    position:absolute;
    left:0;
    top:100%;
    z-index:9;
    height:0;
    width:100px;
    background:#ff0000;
    -webkit-transition:height 2s;
    -moz-transition:height 2s;
    transition:height 2s;
}
.btn-fade:hover +.fade-box{
    height:100px;
}

第四个列子——从左上角至右下角

.fade-box{
    position:absolute;
    left:0;
    top:100%;
    z-index:9;
    height:0;
    width:0;
    background:#ff0000;
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out;
}
.btn-fade:hover +.fade-box{
    height:100px;
    width:100px;
}

第四个列子——从左上角至右下角(第二种写法)

.fade-box{
    position:absolute;
    left:0;
    top:100%;
    z-index:9;
    height:100px;
    width:100px;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    background:#ff0000;
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}
.btn-fade:hover +.fade-box{
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}

第四个列子——从左上角至右下角(第三种写法)

.fade-box{
    position:absolute;
    left:0;
    top:100%;
    z-index:9;
    height:100px;
    width:100px;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    background:#ff0000;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
}
.btn-fade:hover +.fade-box{
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}

写法还有很多种，这里就不在一一写出来了，大家可以自己去写一下；

transition-duration ：意思是过渡所需要的时间，就像animate中的时间一样；

ease-in-out是transition-timing-function属性的其中一个参数；他包括了linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);这些参数；

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

---

关于transition就介绍这么多了，用法有很多种，css是很灵活的，大家可以多多发掘,还是那句话，能用css搞定的，劲量不要使用js。

下一篇将会谈谈css3 中的animate属性，敬请期待…