DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS變換計時與延遲:CSS變換(transition)
CSS變換計時與延遲:CSS變換(transition)
編輯:CSS進階教程     

-webkit-transition -moz-transition -o-transition transition

CSS property

被變換的屬性(比如, color)。

Duration

變換持續的時間,通常以秒來計算(比如, .25s).

Timing function

允許你控制持續的時間的計算方式。與其使用一個簡單的線性計算,你可以使變換加速(漸入)或者減速(淡出),或者甚至specify a beat or count (比如,linear). More on this later in the article.

Delay

在動作和變換開始之間等待多久,通常用秒來表示(比如, .1s)。如果你不想延遲,該值可省略。

CSS屬性

color 色彩

crop 百分比

font-weight 數字

height 百分比,長度

letter-spacing 長度

line-height 百分比,長度,數字

opacity 數字

outline-offset 整數

outline-width 長度

right 百分比,長度

text-indent 百分比,長度

text-shadow 陰影

vertical-align 百分比,長度,關鍵詞

visibility 可見性

word-spacing 百分比,長度

z-index 正整數

zoom 數字

變換計時與延遲

使用變換,你可以改變變換的速率,在開始的時候較慢然後在結束的時候加速,反之亦然,或者之間的任何事情。CSS變換有5個計時的關鍵詞,同時也允許你自己定義你自己的計時曲線。

cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之間,以定義用於Time function的貝塞爾曲線的形狀。

linear 均速

ease 逐漸慢下來

ease-in 加速(漸入)

ease-out 減速(淡出)

ease-in-out 加速然後減速

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