动画样式

名称类型默认值描述
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> | infinite1定义动画播放的次数，可设置为infinite无限次播放
animation-timing-functionlinear | ease | ease-in | ease-out | ease-in-outease-
animation-fill-modenone | forwardsnone-

transform 操作

名称类型
translate<length> | <percent> 1010+
translateX<length> | <percent> 1010+
translateY<length> | <percent> 1010+
scale<number>
scaleX<number>
scaleY<number>
rotate<deg> | <rad>
rotateX<deg> | <rad>
rotateY<deg> | <rad>

transform 示例代码

查看示例代码

@keyframes 属性

名称类型默认值描述
background-color<color>--
opacity<number>--
width/height<length>-暂不支持百分比
transform<string>--

暂时不支持起始值(0%)或终止值(100%)缺省的情况，都需显式指定

animation 示例代码

查看示例代码

translated动画 示例代码

查看示例代码