深入學(xué)習(xí)css3動(dòng)畫屬性Transition

1、深入學(xué)習(xí)css3動(dòng)畫屬性transitiontransition： transition-property | transition-duration | transition-timing-function | transition-delay 默認(rèn)值：看每個(gè)自立屬性 取值： transition-property ：檢索或設(shè)置對(duì)象中的參加過渡的屬性 transition-duration ：檢索或設(shè)置對(duì)象過渡的持續(xù)時(shí)光 transition-timing-function ：檢索或設(shè)置對(duì)象中過渡的動(dòng)畫類型 transition-delay ：檢索或設(shè)置對(duì)象延遲過渡的時(shí)光看完這個(gè)我就覺得這個(gè)

2、玩意跟css中的border是差不多類似的寫法的。實(shí)例在這里：http:/codepen.io/kujian/pen/dreie例如：transition:color 0.2s easy-in-out .1s;這個(gè)就是縮寫起來的寫法了。那么假如你要拆開來怎么辦呢？ transition-property:color; transition-duration:.2s; transition-timing-function:ease-in-out; transition-delay:.1s; 這種寫法就跟我剛才說到的border是差不多的，就是把效果拆出來，這樣子實(shí)現(xiàn)了多種效果同時(shí)響應(yīng)。固然定義不

3、同的速率和顯示的間隔也會(huì)有出色的結(jié)果哦。 transition:color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s; 拆出來就是下面這樣子了。 transition-property:color, background-color, color; transition-duration:.5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s; 關(guān)于

4、transition-property的取值如下：（基本是css屬性都能用了） transition-property ： none | all | ',' * transition-property是用來指定當(dāng)元素其中一個(gè)屬性轉(zhuǎn)變時(shí)執(zhí)行transition效果，其主要有以下幾個(gè)值：none(沒有屬 性改 變)；all（全部屬性轉(zhuǎn)變）這個(gè)也是其默認(rèn)值；indent（元素屬性名）；當(dāng)其值為none時(shí)，transition馬上停止執(zhí)行，當(dāng)指定為all 時(shí)，則元素產(chǎn)生任何屬性值變幻時(shí)都將執(zhí)行transition效果，ident是可以指定元素的某一個(gè)屬性值。其對(duì)應(yīng)的類型如下： 1、co

5、lor： 通過紅、綠、藍(lán)和透亮度組件變換（每個(gè)數(shù)值單獨(dú)處理），如：background-color，border-color，color，outline-color等css屬性； 2、length：真切的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-posit

6、ion等屬性； 3、percentage：真切的數(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離漫步驟（囫圇數(shù)字），在真切的數(shù)字空間，以及用法floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生，如：outline-offset，z-index等屬性； 5、number真切的（浮點(diǎn)型）數(shù)值，如：zoom，opacity，font-weight等屬性；

7、6、transform list：細(xì)節(jié)請(qǐng)參閱：css3 transform。 7、rectangle：通過x、 y、 width和height（轉(zhuǎn)為數(shù)值）變換，如：crop； 8、visibility：離漫步驟，在0到1數(shù)字范圍之內(nèi)，0表示躲藏，1表示徹低顯示,如：visibility； 9、shadow：作用于color、x、y、和blur（含糊）屬性，如：text-shadow； 10、gradient：通過每次停止時(shí)的位置和色彩舉行變幻。它們必需有相同的類型（發(fā)射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫，如：background-image； 11、paint server (svg

8、)：只支持下面的狀況：從gradient到gradient以及color到color，然后工作與上面類似； 12、space-separated list of above：假如列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)根據(jù)上面的規(guī)章舉行變幻，否則無變幻； 13、a shorthand property：假如縮寫的全部部分都可以實(shí)現(xiàn)動(dòng)畫，則會(huì)像全部單個(gè)屬性變幻一樣變幻。 詳細(xì)什么css屬性可以實(shí)現(xiàn)transition效果，在w3c官網(wǎng)中列出了全部可以實(shí)現(xiàn)transition效果的css屬性值以及值的類型，大家可以點(diǎn)這里了解細(xì)節(jié)。這里需要提示一點(diǎn)是，并不是什么屬性轉(zhuǎn)變都為觸發(fā)transition動(dòng)作效果

9、，比如頁(yè)面的自適應(yīng)寬度，當(dāng)掃瞄器轉(zhuǎn)變寬度時(shí)，并不會(huì)觸發(fā)transition的效果。但上述表格所示的屬性類型轉(zhuǎn)變都會(huì)觸發(fā)一個(gè)transition動(dòng)作效果。transition-duration ： , * transition-duration是用來指定元素 轉(zhuǎn)換過程的持續(xù)時(shí)光，取值：為數(shù)值，單位為s（秒）,可以作用于全部元素，包括:before和:after偽元素。其默認(rèn)值是0，也就是變換時(shí)是即時(shí)的。三、transition-timing-function： 語(yǔ)法： transition-timing-function ： ease | linear | ease-in | ease-out

10、| ease-in-out |cubic-bezier(, , , ) , ease | linear | ease-in |ease-out | ease-in-out | cubic-bezier(, , , )* 取值： transition-timing-function的值允許你按照時(shí)光的推動(dòng)去轉(zhuǎn)變屬性值的變換速率，transition-timing-function有6個(gè)可能值： 1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)； 2、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0,

11、1.0)； 3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)； 4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0)； 5、ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)； 6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)光曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)p1和點(diǎn)p2。全部值需在0, 1區(qū)域內(nèi)，否則無效。 其是cubic-bezier

12、為通過貝賽爾曲線來計(jì)算轉(zhuǎn)換過程中的屬性值，如下曲線所示，通過轉(zhuǎn)變p1(x1, y1)和p2(x2, y2)的坐標(biāo)可以轉(zhuǎn)變囫圇過程的output percentage。初始默認(rèn)值為default。 其他幾個(gè)屬性的暗示圖：四、transition-delay: 語(yǔ)法：transition-duration ： , *transition-delay ： , * transition-delay是用來指定一個(gè)動(dòng)畫開頭執(zhí)行的時(shí)光，也就是說當(dāng)轉(zhuǎn)變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)光開頭執(zhí)行transition效果，取 值：為數(shù)值，單位為s（秒），它的用法和transition-duration極其相像，也可以作用于全部元素，包 括:before和:after偽元素。 默認(rèn)大小是0′，也就是變換立刻執(zhí)行，沒有延遲。 對(duì)了，最后一個(gè)，這玩意，不同掃瞄器還有有各自