CSS3的出現(xiàn)最引人注意的地方莫過于css動(dòng)畫(CSS Animation)了,而css3過渡(CSS Transition)讓動(dòng)畫變的生動(dòng)更逼真。今天就帶大家一起來認(rèn)識(shí)一下CSS Transition。 CSS3 Transitions有了它,我們從一種效果轉(zhuǎn)換到另一種效果而無需javascript或flash,我們只需一段CSS代碼而已。
瀏覽器支持
Internet Explorer不支持過渡屬性。 它是如何工作?CSS3的過渡效果,讓一個(gè)元素從一種效果轉(zhuǎn)換到另一種效果。
舉例說明: div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } 注意:如果未指定動(dòng)畫延遲時(shí)間,過渡將沒有任何效果,因?yàn)槟J(rèn)值是0。 div:hover { width:300px; } 在哪里定義動(dòng)畫效果?css3動(dòng)畫一般通過鼠標(biāo)事件或者說狀態(tài)定義動(dòng)畫,通常我們可以用CSS中偽類和js中的鼠標(biāo)事件來定義。
js的事件也可以,比如click,focus,mousemove,mouseover,mouseout等等 transition的基本語法:css3動(dòng)畫通過transition屬性和其他css屬性(顏色,寬高,變形,位置等等)配合來實(shí)現(xiàn)。 transition的語法:
當(dāng)然這是簡(jiǎn)寫,我們也可以完整的寫:
那些屬性可以變換?transition-property:要變化的屬性,比如元素變寬則是width,文字顏色要變色這是W3C給出了一個(gè)可變換屬性的列表:
幾乎所有的有色彩、大小或位置等組件的CSS屬性,包括許多新添加的CSS3屬性, 都可以應(yīng)用變換。一個(gè)值得注意的例外是box-shadow,不過部分瀏覽器還是對(duì)box-shadow添加了支持。 該取值還有個(gè)強(qiáng)大的“all”取值,表示上表所有屬性; 除了以上屬性外,當(dāng)然還有css3中大放異彩的css3變形,比如放大縮小,旋轉(zhuǎn)斜切,漸變等等。 動(dòng)畫時(shí)間transition-duration :動(dòng)畫執(zhí)行的時(shí)間,以秒為單位,比如0.1秒可以寫成”0.1s”或者”.1s”,注意后面有個(gè)“s”單位。 動(dòng)畫執(zhí)行的計(jì)算方式transition-timing-function :動(dòng)畫執(zhí)行的計(jì)算方式,這里時(shí)間函數(shù)是令人崩潰的貝塞爾曲線,幸好css3提過了幾個(gè)取值: ease:逐漸慢下來,函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0). linear:線性過度,函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0). ease-in:由慢到快,函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0). ease-out:由快到慢, 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0). ease-in-out:由慢到快在到慢, 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0) cubic-bezier:特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi),否則無效。 動(dòng)畫延遲transition-delay:在動(dòng)作和變換開始之間等待多久,通常用秒來表示(比如, .1s)。如果你不想延遲,該值可省略。 重疊動(dòng)畫經(jīng)常會(huì)碰到同一元素會(huì)有多個(gè)動(dòng)畫同時(shí)執(zhí)行的時(shí)侯,比如文字顏色和背景同時(shí)變化: -webkit-transition: color .25s linear , background-color 1s linear; 和transform(變形)結(jié)合的一些動(dòng)畫這時(shí)候transition-property建議取值為“all”; 典型的應(yīng)用舉例: 放大縮小: #scale { -webkit-transition: all .3s ease-in-out; } #scale:hover { -webkit-transform: scale(1.5); } 旋轉(zhuǎn): #rotate { -webkit-transition: all 1s ease-in-out;} #rotate:hover {-webkit-transform: rotate(720deg);} |
|