是什么
我們先看下定義
CSS transitions provide a way to control animation speed when changing CSS properties
它是一個(gè)控制屬性(css屬性)發(fā)生變化時(shí)的運(yùn)動(dòng)效率的css屬性
單純的屬性變化是在瞬間完成
我們接下來要將animation與他有異曲同工之妙,但是transition需要觸發(fā)調(diào)用,沒辦法自執(zhí)行,而且在做組合動(dòng)畫的時(shí)候需要js 配合 非常麻煩
如何用
觸發(fā)時(shí)機(jī)
過渡的觸發(fā)時(shí)機(jī):一定是需要過渡的屬性發(fā)生了改變才會(huì)觸發(fā)
- js改變style中是過度屬性,或通過改變class樣式從而達(dá)到改變過度屬性的目的
- css的偽類實(shí)現(xiàn)過度屬性的變化
子屬性
-
transition-delay : 開始作用之前需要等待的時(shí)間泛粹。
transition-delay 描述 作用范圍 所有element和偽元素 值 ms | s 默認(rèn)值 0s 縮寫中可否省略 可以 特殊值 initial:0s;inherit:繼承父類。unset屬性在此指代:initial(非繼承屬性)繼承屬性 否 -
transition-duration :屬性規(guī)定完成過渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）
transition-duration 描述 作用范圍 同上 值 ms | s 缺省默認(rèn)值 0s 縮寫中可否省略 不可省略 特殊值 initial:0s;inherit:繼承父類窿侈。unset屬性在此指代:initial(非繼承屬性)繼承屬性 否 -
transition-property:指定應(yīng)用過渡屬性的名稱
transition-property 描述 作用范圍 同上 值 CSS_animated_properties 缺省默認(rèn)值 all 縮寫中可否省略 不可省略 特殊值 initial:all;inherit:繼承父類;unset:在此指代:initial(非繼承屬性);all:變化屬性中屬于css過渡屬性的值;none:沒有變化繼承屬性 否 -
transition-timing-function:在所有過渡內(nèi)容與過渡時(shí)間都固定的情況下,確定過渡如何進(jìn)行
transition-property 描述 作用范圍 同上 值 timing-function 缺省默認(rèn)值 ease 縮寫中可否省略 可以省略 特殊值 initial:ease;inherit:繼承父類;unset:在此指代:initial(非繼承屬性);其他詳見MDN 與CSS3 Transition繼承屬性 否
縮寫順序:transition: <property:css屬性不可缺省> <duration:過渡時(shí)間不可缺省> <timing-function:過渡過程> <delay:延遲過渡時(shí)間>;
動(dòng)機(jī)與目標(biāo)
未完待續(xù)...
