1# 动画样式
2
3
4组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。
5
6
7| 名称                        | 类型                                 | 默认值         | 描述                                       |
8| ------------------------- | ---------------------------------- | ----------- | ---------------------------------------- |
9| transform                 | string                             | -           | 详见表1。                                    |
10| animation-name            | string                             | -           | 指定\@keyframes，详见表2。                      |
11| animation-delay           | <time>                       | 0           | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。 |
12| animation-duration        | &lt;time&gt;                       | 0           | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。<br/>**说明：**<br/>animation-duration&nbsp;样式必须设置，否则时长为&nbsp;0，则不会播放动画。 |
13| animation-iteration-count | number&nbsp;&nbsp;\|&nbsp;infinite | 1           | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。    |
14| animation-timing-function | string                             | <br/>linear | 描述动画执行的速度曲线，用于使动画更为平滑。<br/>可选项有：<br/>-&nbsp;linear：表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease-in：表示动画以低速开始，cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out：表示动画以低速结束，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
15| animation-fill-mode       | string                             | none        | 指定动画开始和结束的状态：<br/>-&nbsp;none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。 |
16
17
18  **表1** transform操作说明
19
20| 名称         | 类型                                   | 描述         |
21| ---------- | ------------------------------------ | ---------- |
22| translateX | &lt;length&gt;                       | X轴方向平移动画属性 |
23| translateY | &lt;length&gt;                       | Y轴方向平移动画属性 |
24| rotate     | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt; | 旋转动画属性     |
25
26>  **说明：**
27>
28>  轻量级智能穿戴仅支持原始大小的图片进行旋转。
29
30
31  **表2** \@keyframes属性说明
32
33| 名称               | 类型             | 默认值  | 描述                 |
34| ---------------- | -------------- | ---- | ------------------ |
35| background-color | &lt;color&gt;  | -    | 动画执行后应用到组件上的背景颜色。  |
36| width            | &lt;length&gt; | -    | 动画执行后应用到组件上的宽度值。   |
37| height           | &lt;length&gt; | -    | 动画执行后应用到组件上的高度值。   |
38| transform        | string         | -    | 定义应用在组件上的变换类型，见表1。 |
39
40
41对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例：
42
43
44```css
45@keyframes Go
46{
47   from {
48     background-color: #f76160;
49   }
50   to {
51     background-color: #09ba07;
52   }
53}
54```
55
56
57![动画样式demo1](figures/动画样式demo1.gif)
58
59
60
61
62
63>  **说明：**
64>
65>  \@keyframes的from/to不支持动态绑定。
66