快應(yīng)用 動(dòng)畫(huà)樣式

2020-08-08 15:34 更新

快應(yīng)用支持開(kāi)發(fā)者制作動(dòng)畫(huà)，提供了transform類與animation類的動(dòng)畫(huà)樣式屬性，且參數(shù)格式與 CSS 對(duì)齊，更方便開(kāi)發(fā)者上手適配動(dòng)畫(huà)

transform可參考此 文檔入門

animation可參考此 文檔入門

名稱 類型 默認(rèn)值 描述
transform-origin <position> 0px 0px 變換原點(diǎn)位置，單位目前僅支持px，格式為：50px 100px
transform <string> - 見(jiàn)下面transform操作
animation-name <string> - 與@keyframes的name相呼應(yīng)，見(jiàn)下面@keyframes屬性
animation-delay <time> 0 目前支持的單位為[ s(秒) | ms(毫秒) ]
animation-duration <time> 0 目前支持的單位為[ s(秒) | ms(毫秒) ]
animation-iteration-count <integer> | infinite 1 定義動(dòng)畫(huà)播放的次數(shù)，可設(shè)置為infinite無(wú)限次播放
animation-timing-function linear | ease | ease-in | ease-out | ease-in-out ease -
animation-fill-mode none | forwards none -

transform操作

名稱 類型
translate <length>
translateX <length>
translateY <length>
scale <number>
scaleX <number>
scaleY <number>
rotate <deg> | <rad>
rotateX <deg> | <rad>
rotateY <deg> | <rad>

@keyframes屬性

名稱 類型 默認(rèn)值 描述
background-color <color> - -
opacity <number> - -
width/height <length> - 暫不支持百分比
transform <string> - -

暫時(shí)不支持起始值(0%)或終止值(100%)缺省的情況，都需顯式指定


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)