css3動(dòng)畫屬性transition

《css3動(dòng)畫屬性transition》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、今天我們接著一起來看CSS3動(dòng)畫屬性中的一個(gè)屬性Transition。W3C標(biāo)準(zhǔn)中對(duì)css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值?！毕旅嫖覀兺瑯訌钠渥钫Z法和屬性值開始一步一步來學(xué)習(xí)transition的具體使用語法：1transition：[<'transition-property'>

2、

3、<'transition-duration'>

4、

5、<'transiti

6、on-timing-function'>

7、

8、<'transition-delay'>[,[<'transition-property'>

9、

10、<'transition-duration'>

11、

12、<'transition-timing-function'>

13、

14、<'transition-delay'>]]*transition主要包含四個(gè)屬性值：執(zhí)行變換的屬性：transition-property,變換延續(xù)的時(shí)間：transition-duration,在延續(xù)時(shí)間段，變換的速率變化transition-timing-function,變換延

15、遲時(shí)間transition-delay。下面分別來看這四個(gè)屬性值一、transition-property:語法：1transition-property：none

16、all

17、[][',']*transition-property是用來指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行transition效果，其主要有以下幾個(gè)值：none(沒有屬性改變)；all（所有屬性改變）這個(gè)也是其默認(rèn)值；indent（元素屬性名）。當(dāng)其值為none時(shí)，transition馬上停止執(zhí)行，當(dāng)指定為all時(shí)，則元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行

18、transition效果，ident是可以指定元素的某一個(gè)屬性值。其對(duì)應(yīng)的類型如下：1、color:通過紅、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值處理）如：background-color,border-color,color,outline-color等css屬性；2、length:真實(shí)的數(shù)字如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-hei

19、ght,line-height,height,border-width,border-spacing,background-position等屬性；3、percentage:真實(shí)的數(shù)字如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；4、integer離散步驟（整個(gè)數(shù)字），在真實(shí)的數(shù)字空間，以及使用flo

20、or()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生如：outline-offset,z-index等屬性；5、number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom,opacity,font-weight,等屬性；6、transformlist:詳情請(qǐng)參閱：《CSS3Transform》7、rectangle:通過x,y,width和height（轉(zhuǎn)為數(shù)值）變換，如：crop8、visibility:離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility9、shadow:作用于color,x,y和blur（模糊）屬性,如：text

21、-shadow10、gradient:通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫,如：background-image11、paintserver(SVG):只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似12、space-separatedlistofabove:如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無變化13、ashorthandproperty:如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫，則會(huì)像所

22、有單個(gè)屬性變化一樣變化具體什么css屬性可以實(shí)現(xiàn)transition效果，在W3C官網(wǎng)中列出了所有可以實(shí)現(xiàn)transition效果的CSS屬性值以及值的類型，大家可以點(diǎn)這里了解詳情。這里需要提醒一點(diǎn)是，并不是什么屬性改變