快应用 动画样式
快应用支持开发者制作动画,提供了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%)缺省的情况,都需显式指定