动画样式

transform-origin

<percentage> | <length> <percentage> | <length>

控件中心

变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%。

示例：

transform-origin: 200px 30%

transform

string

-

支持同时设置平移/旋转/缩放的属性

详见表1。

animation-name

string

-

指定@keyframes，详见表2。

animation-delay

<time>

0

定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

animation-duration

<time>

0

定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

animation-iteration-count

number | infinite

1

定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。

animation-timing-function

string

ease

描述动画执行的速度曲线，用于使动画更为平滑。

可选项有：

• linear：表示动画从头到尾的速度都是相同的。
• ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。
• ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
• ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
• ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
• friction：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
• extreme-deceleration：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
• sharp：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
• rhythm：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
• smooth：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
• cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。

animation-fill-mode

string

none

指定动画开始和结束的状态：

• none：在动画执行之前和之后都不会应用任何样式到目标上。
• forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。

translate

<length>| <percent>

平移动画属性，支持设置x轴和y轴两个维度的平移参数

translateX

<length>| <percent>

X轴方向平移动画属性

translateY

<length>| <percent>

Y轴方向平移动画属性

scale

<number>

缩放动画属性，支持设置x轴和y轴两个维度的缩放参数

scaleX

<number>

X轴方向缩放动画属性

scaleY

<number>

Y轴方向缩放动画属性

rotate

<deg> | <rad>

旋转动画属性，支持设置x轴和y轴两个维度的选中参数

rotateX

<deg> | <rad>

X轴方向旋转动画属性

rotateY

<deg> | <rad>

Y轴方向旋转动画属性

background-color

<color>

-

动画执行后应用到组件上的背景颜色。

opacity

number

1

动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。

width

<length>

-

动画执行后应用到组件上的宽度值。

height

<length>

-

动画执行后应用到组件上的高度值。

transform

string

-

定义应用在组件上的变换类型，见表1。