欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

CSS3的出現最引人注意的地方莫過(guò)于css動(dòng)畫(huà)（CSS Animation）了，而css3過(guò)渡（CSS Transition）讓動(dòng)畫(huà)變的生動(dòng)更逼真。今天就帶大家一起來(lái)認識一下CSS Transition。

CSS3 Transitions

有了它，我們從一種效果轉換到另一種效果而無(wú)需javascript或flash,我們只需一段CSS代碼而已。

瀏覽器支持

屬性	瀏覽器
transition

Internet Explorer不支持過(guò)渡屬性。

Firefox4需要前綴-moz-。

Chrome和Safari需要前綴-webkit-。

Opera需要前綴-o-。

它是如何工作？

CSS3的過(guò)渡效果，讓一個(gè)元素從一種效果轉換到另一種效果。

要做到這一點(diǎn)，你必須指定兩件事：

1. 指定要添加效果的CSS屬性
2. 指定效果的持續時(shí)間。

舉例說(shuō)明：

    div    {    transition: width 2s;    -moz-transition: width 2s; /* Firefox 4 */    -webkit-transition: width 2s; /* Safari and Chrome */    -o-transition: width 2s; /* Opera */    }

注意：如果未指定動(dòng)畫(huà)延遲時(shí)間，過(guò)渡將沒(méi)有任何效果，因為默認值是0。

鼠標放上去的時(shí)候，變換開(kāi)始：

    div:hover    {    width:300px;    }

在哪里定義動(dòng)畫(huà)效果？

css3動(dòng)畫(huà)一般通過(guò)鼠標事件或者說(shuō)狀態(tài)定義動(dòng)畫(huà)，通常我們可以用CSS中偽類(lèi)和js中的鼠標事件來(lái)定義。

js的事件也可以，比如click，focus，mousemove,mouseover,mouseout等等

transition的基本語(yǔ)法：

css3動(dòng)畫(huà)通過(guò)transition屬性和其他css屬性（顏色，寬高，變形，位置等等）配合來(lái)實(shí)現。

transition的語(yǔ)法：

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

當然這是簡(jiǎn)寫(xiě)，我們也可以完整的寫(xiě)：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*；

transition-duration ： <time> [, <time>]*

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-delay ： <time> [, <time>]*

那些屬性可以變換？

transition-property:要變化的屬性，比如元素變寬則是width，文字顏色要變色這是W3C給出了一個(gè)可變換屬性的列表：

幾乎所有的有色彩、大小或位置等組件的CSS屬性，包括許多新添加的CSS3屬性， 都可以應用變換。一個(gè)值得注意的例外是box-shadow，不過(guò)部分瀏覽器還是對box-shadow添加了支持。

該取值還有個(gè)強大的“all”取值，表示上表所有屬性；

除了以上屬性外，當然還有css3中大放異彩的css3變形，比如放大縮小，旋轉斜切，漸變等等。

動(dòng)畫(huà)時(shí)間

transition-duration ：動(dòng)畫(huà)執行的時(shí)間，以秒為單位，比如0.1秒可以寫(xiě)成”0.1s”或者”.1s”，注意后面有個(gè)“s”單位。

動(dòng)畫(huà)執行的計算方式

transition-timing-function ：動(dòng)畫(huà)執行的計算方式，這里時(shí)間函數是令人崩潰的貝塞爾曲線(xiàn)，幸好css3提過(guò)了幾個(gè)取值：

ease：逐漸慢下來(lái)，函數等同于貝塞爾曲線(xiàn)(0.25, 0.1, 0.25, 1.0).

linear：線(xiàn)性過(guò)度,函數等同于貝塞爾曲線(xiàn)(0.0, 0.0, 1.0, 1.0).

ease-in：由慢到快,函數等同于貝塞爾曲線(xiàn)(0.42, 0, 1.0, 1.0).

ease-out：由快到慢, 函數等同于貝塞爾曲線(xiàn)(0, 0, 0.58, 1.0).

ease-in-out：由慢到快在到慢, 函數等同于貝塞爾曲線(xiàn)(0.42, 0, 0.58, 1.0)

cubic-bezier：特定的cubic-bezier曲線(xiàn)。 (x1, y1, x2, y2)四個(gè)值特定于曲線(xiàn)上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區域內，否則無(wú)效。

動(dòng)畫(huà)延遲

transition-delay：在動(dòng)作和變換開(kāi)始之間等待多久，通常用秒來(lái)表示(比如, .1s)。如果你不想延遲，該值可省略。

重疊動(dòng)畫(huà)

經(jīng)常會(huì )碰到同一元素會(huì )有多個(gè)動(dòng)畫(huà)同時(shí)執行的時(shí)侯，比如文字顏色和背景同時(shí)變化：

-webkit-transition: color .25s linear , background-color 1s linear;

和transform(變形)結合的一些動(dòng)畫(huà)

這時(shí)候transition-property建議取值為“all”；

典型的應用舉例：

放大縮?。?/strong>

#scale { -webkit-transition: all .3s ease-in-out; }

#scale:hover { -webkit-transform: scale(1.5); }

旋轉：

#rotate { -webkit-transition: all 1s ease-in-out;}

#rotate:hover {-webkit-transform: rotate(720deg);}