# 动画样式

手机 手表

卡片支持开发者制作动画，提供了transform类、animation类与transition类的动画样式属性，且参数格式与 CSS 对齐，更方便开发者上手适配动画

transform可参考此文档 (opens new window)入门

animation可参考此文档 (opens new window)入门

transition 可参考此文档 (opens new window)入门

# 动画样式列表

名称 类型 默认值 描述
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 | cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end | steps(number_of_steps[, step-direction]?) ease -
animation-fill-mode none | forwards none -

注：

  • animation-timing-function 类型

cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end | steps(number_of_steps[, step-direction]?)

名称 类型 默认值 必填 描述
number_of_steps <integer> - 是 表示等间隔步数的正整数
step-direction jump-start | jump-end | jump-none | jump-both | start | end end 否 指示函数左连续或右连续的关键字
  • cubic-bezier(x1, y1, x2, y2)

参数 x1, y1, x2, y2 是 <number> 类型的值，代表当前定义的立方贝塞尔曲线中的 P1 和 P2 点的横坐标和纵坐标，x1 和 x2 必须在 [0，1] 范围内，否则当前值无效。

# transform 操作

名称 类型
translate <length> | <percent> 1010+
translateX <length> | <percent> 1010+
translateY <length> | <percent> 1010+
translateZ 手表不支持 <length> | <percent> 1200+
scale <number>
scaleX <number>
scaleY <number>
rotate <deg> | <rad>
rotateX <deg> | <rad>
rotateY <deg> | <rad>

# animation-name 属性

指定所采用的一系列动画，属性值的每个名称代表一个由 @keyframes 属性定义的关键帧序列。该属性支持在组件中应用单个动画或多个动画 ，应用多个动画时动画同时开始执行。

示例代码：

/* 单个动画 */
animation-name: Color;
animation-name: translate;
animation-name: rotate;

/* 多个动画 1070+ */
animation-name: Color, Opacity;
animation-name: Width, translate, rotate;
1
2
3
4
5
6
7
8

# @keyframes 属性

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

注：

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

# animation   示例代码

查看示例代码 (opens new window)

# translate 动画   示例代码

查看示例代码 (opens new window)