DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 利用css3的transition實現slide
利用css3的transition實現slide
編輯:CSS詳解     
最近感覺自己對CSS3動畫一知半解,沒有去認真揣測其中參數的含義。今天利用空閒時間,先從常用的transition來入手。

  Transition對應的CSS屬性列表:

  1、transition-property

  * 指定當元素哪個屬性改變時執行Transition效果,屬性可以時以下屬性:none、all以及其他可以觸發浏覽器reflow或repaint的屬性。

  * 當指定為none時,動畫立即停止,當指定為all的時候,則當元素產生任何屬性值變化時都將執行“轉換”效果,比如大小改變。

  * 初始默認值為all.

  2、transition-duration

  * 指定“轉換”過程的時間,如:1s、none。

  * 初始默認值為0.

  3、transition-timing-function

  * 指定“轉換”過程中可用的效果,預設的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezIEr(x1, y1, x2, y2),默認值時easy。

  * cubic-bezIEr為通過貝塞爾曲線來計算“轉換”過程中的屬性值,如下曲線所示,通過改變P1(x1, y1)和P2(x2, y2)的坐標可以改變整個過程的Output Percentage。

  * 初始默認值為default.

  4、transition-delay

  * 指定一個動畫開始執行的時間,即當改變元素屬性值後多長時間開始執行“轉換效果”

  * 初始默認值為0.

  有興趣的可以看看我利用transition實現slide幻燈片demo。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved