CSS3之過渡Transition

CSS3也有着很是強大的屬性，那就是過渡——Transition。過渡——Transition在W3C的描述：「css的transition容許css的屬性值在必定

 

的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。

 

」既然CSS3的過渡這麼強大，下面咱們就一點一點掌握它吧。

　　CSS3中的過渡Transition有四個中心屬性：transition-property、transition-duration、transition-delay和transition-timing-

 

function。

 

　　1、transition-property——指定要運動的樣式

 

　　一、transition-property的語法

[css]  

transition-property :all(全部屬性改變) || [attr] (指定要運動的樣式)|| none(沒有屬性改變)  

 

　　二、transition-property的屬性值

　　(1)none：transition立刻中止執行

　　(2)all：元素產生任何屬性值變化時都將執行transition效果

　　(3)attr：指定要運動的樣式

 

　　2、transition-duration

　　transition-duration是指定元素轉換過程的持續時間，單位爲秒(s)。transition-duration能夠做用於全部元素，包括:before和:after

 

僞元素。其默認值是0，也就是變換時是即時的。

 

　　3、transition-delay—— 延遲時間

　　transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，單位爲s(秒)

 

，其使用和transition-duration極其類似，也能夠做用於全部元素，包括:before和:after僞元素。 默認大小是"0"，也就是變換當即執行，

 

沒有延遲。

 

　　4、transition-timing-function——指定運動形式

　　transition-timing-function ： ease(逐漸變慢) | linear(勻速) | ease-in(加速) | ease-out(減速) | ease-in-out(先加速而後減

 

速) | cubic-bezier(該值容許你去自定義一個時間曲線)(number, number, number, number>)

 

　　5、transition的綜合寫法

[css]  

元素選擇器{transition:運動的樣式 持續時間 運動形式 延遲時間;}  

 

　　6、transition的綜合兼容寫法

 

　　一、Mozilla內核

[css] 

元素選擇器{-moz-transition:運動的樣式 持續時間 運動形式 延遲時間;}  

 

　　二、Webkit內核

[css] 

元素選擇器{-webkit-transition:運動的樣式 持續時間 運動形式 延遲時間;}  

 

　　三、Opera內核

[css] 

元素選擇器{-o-transition:運動的樣式 持續時間 運動形式 延遲時間;}  

 

　　四、W3C 標準

[css] 

元素選擇器{transition:運動的樣式 持續時間 運動形式 延遲時間;}  

 

　　7、transition的小實例

　　

　　CSS代碼：

[css]  

#timings-demo {border: 1px solid #ccc;padding: 10px;height: 400px;width: 400px;}  

.box {width: 100px;height: 50px;line-height: 50px;text-align: center;color: #fff;margin-bottom: 10px;  

    -webkit-border-radius: 5px;  

    -webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);  

}  

/*逐漸變慢效果：*/          

#ease {background: #f36;  

    -webkit-transition: all 5s ease 0.3s;  

}  

/*加速效果：*/  

#ease-in {background: #369;  

     -webkit-transition: all 3s ease-in 0.5s;  

}  

/*減速效果：*/  

#ease-out {background: #636;   

    -webkit-transition: all 5s ease-out 0s;  

}  

/*先加速而後減速效果：*/  

#ease-in-out {background: #3e6;  

    -webkit-transition: all 1s ease-in-out 2s;  

}  

/*勻速效果：*/  

#linear { background: #999;  

    -webkit-transition: all 6s linear 0s;  

}  

/*該值容許你去自定義一個時間曲線效果：*/  

#cubic-bezier {background: #6d6;  

    -webkit-transition: all 4s cubic-bezier 1s;  

}  

/*hover狀態下或單擊click按鈕後box產生屬性變化*/  

#timings-demo:hover .box {  

    -webkit-transform: rotate(360deg) scale(1.2);  

    -webkit-border-radius: 25px;  

}  

 

　　HTML代碼：

[ html]  

<div id="timings-demo">  

    <div id="ease" class="box">Ease</div>  

    <div id="ease-in" class="box">Ease-in</div>  

    <div id="ease-out" class="box">Ease-out</div>  

    <div id="ease-in-out" class="box">Ease-in-out</div>  

    <div id="linear" class="box">Linear</div>  

    <div id="cubic-bezier" class="box">Cubic-bezier</div>  

</div>  

 

 

　　 CSS3之過渡Transition就爲你們介紹到這裏了，CSS3之過渡Transition的神奇之處遠不止上面這些，還能夠作不少好玩的小東東。