transition(屬性漸變):
"CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration"
過渡——Transition在W3C的描述:“css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊带族、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā),并圓滑地以動(dòng)畫效果改變CSS的屬性值。
-webkit-transition:CSS屬性(none|all|屬性) 持續(xù)時(shí)間 時(shí)間函數(shù) 延遲時(shí)間
CSS屬性(transition-property)
要變化的屬性哀托,比如元素變寬則是width签赃,文字顏色要變色這是color;W3C給出了一個(gè)可變換屬性的列表:除了以上屬性外庸疾,還有css3中大放異彩的css3變形,比如放大縮小当编,旋轉(zhuǎn)斜切届慈,漸變等。該取值還有個(gè)強(qiáng)大的“all”取值,表示上表所有屬性金顿;
持續(xù)時(shí)間(transition-duration)
動(dòng)畫執(zhí)行的時(shí)間词渤,以秒為單位,比如0.1秒可以寫成”0.1s”或者”.1s”串绩,注意后面有個(gè)“s”單位缺虐。
時(shí)間函數(shù)(transition-timing-function):
ease:逐漸慢下來
linear:線性過度
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:由慢到快在到慢
cubic-bezier:特定的cubic-bezier曲線,所有值需在[0, 1]區(qū)域內(nèi),否則無效礁凡。
延遲時(shí)間(transition-delay)
在動(dòng)作和變換開始之間等待多久高氮,通常用秒來表示(比如, .1s)。如果你不想延遲顷牌,該值可省略剪芍。
例:讓所有的元素的屬性變化在1秒內(nèi)平滑的過渡
* {
-webkit-transition: all 1s;
}
hover狀態(tài)下或單擊click按鈕后box產(chǎn)生屬性變化
#timings-demo:hover .box {
background: #636;
-webkit-transition: all 2s ease-out 0s;
}
定義CSS3動(dòng)畫的位置:CSS偽類和JS事件
:link 未訪問的鏈接
:visited 訪問過的鏈接
:hover 鼠標(biāo)懸停
:active 鼠標(biāo)點(diǎn)擊
:focus 元素選中