1# Animation Styles
2
3
4Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or **.css** files.
5
6
7| Name                       | Type                                | Default Value        | Description                                      |
8| ------------------------- | ---------------------------------- | ----------- | ---------------------------------------- |
9| transform                 | string                             | -           | Translation, rotation, and scaling attributes. For details, see Table 1.                                   |
10| animation-name            | string                             | -           | \@keyframes rule. For details, see Table 2.                     |
11| animation-delay           | <time>                       | 0           | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. \|The default unit is ms.|
12| animation-duration        | &lt;time&gt;                       | 0           | Animation duration, in ms or s, for example, **1000 ms** or **1s**. \|The default unit is ms.<br>**NOTE**<br>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played.|
13| animation-iteration-count | number  \| infinite | 1           | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely.   |
14| animation-timing-function | string                             | <br>linear | Speed curve of an animation, which makes the animation more fluent.<br>Available values are as follows:<br>- **linear**: The animation speed keeps unchanged.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
15| animation-fill-mode       | string                             | none        | Start and end styles of the animation.<br>- **none**: No style is applied to the target before or after the animation is executed.<br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.|
16
17
18  **Table 1** transform
19
20| Name        | Type                                  | Description        |
21| ---------- | ------------------------------------ | ---------- |
22| translateX | &lt;length&gt;                       | Moves an element along the x-axis.|
23| translateY | &lt;length&gt;                       | Moves an element along the y-axis.|
24| rotate     | &lt;deg&gt; \| &lt;rad&gt; | Rotates an element.    |
25
26>  **NOTE**
27>
28>  Only images of the original size can be rotated on lite wearables.
29
30
31  **Table 2** \@keyframes
32
33| Name              | Type            | Default Value | Description                |
34| ---------------- | -------------- | ---- | ------------------ |
35| background-color | &lt;color&gt;  | -    | Background color applied to the component after the animation is played. |
36| width            | &lt;length&gt; | -    | Width value applied to the component after the animation is played.  |
37| height           | &lt;length&gt; | -    | Height value applied to the component after the animation is played.  |
38| transform        | string         | -    | Transformation type applied to a component. For details, see Table 1.|
39
40
41If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. The following is an example:
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![animation-demo1](figures/animation-demo1.gif)
58
59
60
61
62
63>  **NOTE**
64>
65>  The \@keyframes rule with **from** and **to** defined cannot be dynamically bound to an element.
66