快应用 动画样式
快应用支持开发者制作动画,提供了transform类与animation类的动画样式属性,且参数格式与 CSS 对齐,更方便开发者上手适配动画
transform可参考此 文档入门
animation可参考此 文档入门
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
transform-origin | <position> |
0px 0px | 变换原点位置,单位目前仅支持px,格式为:50px 100px |
transform | <string> |
- | 见下面transform操作 |
animation-name | <string> |
- | 与@keyframes的name相呼应,见下面@keyframes属性 |
animation-delay | <time> |
0 | 目前支持的单位为[ s(秒) | ms(毫秒) ] |
animation-duration | <time> |
0 | 目前支持的单位为[ s(秒) | ms(毫秒) ] |
animation-iteration-count | <integer> | infinite |
1 | 定义动画播放的次数,可设置为infinite 无限次播放 |
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属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
background-color | <color> |
- | - |
opacity | <number> |
- | - |
width/height | <length> |
- | 暂不支持百分比 |
transform | <string> |
- | - |
暂时不支持起始值(0%)或终止值(100%)缺省的情况,都需显式指定