transition語法:
transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
第一個引數:transition-property,執行變換的屬性(當屬性發生變化時,不直接進行變化,而是以動畫的形式逐漸變化)
取值包括:
none:沒有屬性變化
all:(預設值)所有屬性都變化
indent:指定的屬性
第二個引數:transition-duration,執行變換需要的時間
取值:
0:預設值,立即執行完畢
整數:單位為s或者ms
第三個引數:transition-timing-function,速率變化
取值:
1、ease:逐漸變慢
2、linear:勻速
3、ease-in:加速
4、ease-out:加速
5、ease-in-out:加速然後減速
6、cubic-bezier:自定義,例如(0.25,0.5,0.75,1),設定四個0-1之間的數字
第四個引數:transition-delay,delay時間,多長時間之後執行
取值同transition-duration
css3整理--transition
相關文章
- CSS3 TransitionCSSS3
- CSS3 transition-delayCSSS3
- CSS3 transition-durationCSSS3
- CSS3 transition-propertyCSSS3
- Css3中的TransitionCSSS3
- CSS3 transition 屬性CSSS3
- css3 動畫(一) transitionCSSS3動畫
- CSS3 之 transform & transition & animationCSSS3ORM
- CSS3 transition-timing-functionCSSS3Function
- css3中transition屬性詳解CSSS3
- CSS transitionCSS
- Android Transition NoteAndroid
- react-transition-group原始碼淺析(一):Transition.mdReact原始碼
- 【Vue】transition動畫Vue動畫
- Simple state transition 3
- 自己整理的css3動畫庫,附下載連結CSSS3動畫
- CSS transition-timing-functionCSSFunction
- 細談 vue - transition 篇Vue
- animation與transition 區別
- 756-Pyramid Transition Matrix
- animation、transition、transform的區別ORM
- css transition 實現滑入滑出CSS
- IDC Digital Transition Annual Festival(2018.10.19)Git
- transition、transform、animate的區別?ORM
- CSS動畫:animation、transition、transform、translateCSS動畫ORM
- Simple one-hot state transition 3
- 細談 vue - transition-group 篇Vue
- 照片牆(transform/transition/z-index)ORMIndex
- 終於不再對transition和animation,傻傻分不清楚了 --vue中使用transition和animationVue
- Vue 常用 transition 動畫效果記錄Vue動畫
- CSS魔法堂:Transition就這麼好玩CSS
- 27.Qt Quick QML-State、TransitionQTUI
- transform,transition,animation 的混合使用——結業篇ORM
- ubuntu下安裝transition_amr_parser教程。Ubuntu
- 關於animation和transition一點知識
- 強大的CSS動畫:Transition與AnimationCSS動畫
- CSS3CSSS3
- 關於CSS Transition,你需要知道的事CSS
- CSS3簡明教程之初識CSS3CSSS3