1# Animation Styles
2
3> **NOTE**
4>
5> The initial APIs of this component  are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
6
7Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or CSS files.
8
9| Name                      | Type                                                         | Description                                                  |
10| ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
11| transform-origin          | string<sup>6+</sup> \| \<percentage> \| \<length> string<sup>6+</sup> \| \<percentage> \| \<length> | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br/>transform-origin: 200px 30%<br/>transform-origin: 100px topt<br/>ransform-origin: center center<br/>Default value: **center center** |
12| transform                 | string                                                       | Translation, rotation, and scaling attributes.<br/>For details, see **transform**. |
13| animation<sup>6+</sup>               | string                                                       | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed.<br/>Default value: 0s&nbsp;ease&nbsp;0s&nbsp;1&nbsp;normal&nbsp;none&nbsp;running&nbsp;none |
14| animation-name            | string                                                       | @keyframes rule. For details, see **@keyframes**. |
15| animation-delay           | \<time>                                                      | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>Default value: 0 |
16| animation-duration        | \<time>                                                      | 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.<br/>Default value: **0** |
17| animation-iteration-count | number \| infinite                                           | 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.<br/>Default value: **1** |
18| animation-timing-function | string                                                       | Speed curve of an animation, which makes the animation more fluent.Available values are as follows:  <br>- **linear**: The animation speed keeps unchanged. <br>- **ease**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.<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.<br>- **friction**: The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).<br>- **extreme-deceleration**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).<br>- **sharp**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).<br>- **rhythm**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).<br>- **smooth**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).<br>- **cubic-bezier**: You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1.<br>- **steps**: The animation uses the step curve<sup>6+</sup>. The syntax is as follows: steps(number[, end\|start]), where the first parameter **number** is mandatory and must be a positive integer; the second parameter is optional and indicates that the start point or end point (default) of each interval changes step by step.<br/>Default value: **ease** |
19| animation-direction<sup>6+</sup>     | string                                                       | Mode of playing the animation.   <br>- **normal**: Plays the animation in forward loop mode.  <br>- **reverse**: Plays the animation in reverse loop mode.  <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.  <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction.<br/>Default value: **normal** |
20| animation-fill-mode       | string                                                       | 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.  <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used.  <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules.<br/>Default value: none |
21| animation-play-state<sup>6+</sup>    | string                                                       | Current state of the animation.  <br>- **paused**: paused  <br>- **running**: playing<br/>Default value: **running** |
22| transition<sup>6+</sup>              | string                                                       | Transition effect when the component status is switched. The following four attributes can be set through the **transition** attribute.<br>- **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.  <br>- **transition-duration**: duration required for completing the transition effect, in seconds.  <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported.  <br>- **transition-delay**: delay for starting the transition effect, in seconds.<br/>Default value: **all&nbsp;0&nbsp;ease&nbsp;0** |
23
24**Table 1** transform
25
26| Name          | Type                                   | Description                                                  |
27| ------------- | -------------------------------------- | ------------------------------------------------------------ |
28| none<sup>6+</sup>        | -                                      | Does not perform any transformation. |
29| matrix<sup>6+</sup>      | \<number>                              | Defines a matrix of six values, which represent scaleX, skewY, skewX, scaleY, translateX, translateY. |
30| matrix3d<sup>6+</sup>    | \<number>                              | Defines a 4 x 4 matrix of 16 values.                          |
31| translate     | \<length> \| \<percent>                | Moves an element in 2D space.      |
32| translate3d<sup>6+</sup> | \<length> \| \<percent>                | Moves an element in 3D space. There are three input parameters, indicating the translation distance of the x-axis, y-axis, and z-axis, respectively. |
33| translateX    | \<length> \| \<percent>                | Moves an element along the x-axis.                           |
34| translateY    | \<length> \| \<percent>                | Moves an element along the y-axis.                           |
35| translateZ<sup>6+</sup>  | \<length> \| \<percent>                | Moves an element along the z-axis. |
36| scale         | \<number>                              | Resizes an element in 2D space. You need to set the target width and height on the x-axis and y-axis. |
37| scale3d<sup>6+</sup>     | \<number>                              | Resizes an element in 3D space. There are three input parameters, indicating the scale ratio of the x-axis, y-axis, and z-axis, respectively. |
38| scaleX        | \<number>                              | Resizes an element along the x-axis. |
39| scaleY        | \<number>                              | Resizes an element along the y-axis. |
40| scaleZ<sup>6+</sup>      | \<number>                              | Resizes an element along the z-axis. |
41| rotate        | \<deg> \| \<rad> \| \<grad><sup>6+</sup> \| \<turn><sup>6+</sup> | Rotates an element in 2D space. You can set the element to rotate around its x-axis or y-axis. |
42| rotate3d<sup>6+</sup>    | \<deg> \| \<rad> \| \<grad> \| \<turn> | Rotates an element in 3D space. There are four input parameters: The first three parameters are the rotation vectors of the x-axis, y-axis, and z-axis, and the fourth parameter is the rotation angle. |
43| rotateX       | \<deg> \| \<rad> \| \<grad><sup>6+</sup> \| \<turn><sup>6+</sup> | Rotates an element around the x-axis.                        |
44| rotateY       | \<deg> \| \<rad> \| \<grad><sup>6+</sup> \| \<turn><sup>6+</sup> | Rotates an element around the y-axis.                        |
45| rotateZ<sup>6+</sup>     | \<deg> \| \<rad> \| \<grad> \| \<turn> | Rotates an element around the z-axis. |
46| skew<sup>6+</sup>        | \<deg> \| \<rad> \| \<grad> \| \<turn> | Skews an element in 2D space. There are two input parameters, indicating the 2D skew angle of the x-axis and y-axis, respectively. |
47| skewX<sup>6+</sup>       | \<deg> \| \<rad> \| \<grad> \| \<turn> | Skews an element along the x-axis in 2D space. |
48| skewY<sup>6+</sup>       | \<deg> \| \<rad> \| \<grad> \| \<turn> | Skews an element along the y-axis in 2D space. |
49| perspective<sup>6+</sup> | \<number>                              | Sets the distance from the lens to the element's surface in the 3D perspective scenario. |
50
51**Table 2** @keyframes
52
53| Name                  | Type                                                         | Default Value | Description                                                  |
54| --------------------- | ------------------------------------------------------------ | ------------- | ------------------------------------------------------------ |
55| background-color      | \<color>                                                     | -             | Background color applied to the component after the animation is played. |
56| opacity               | number                                                       | 1             | Opacity value applied to the component after the animation is played. The value ranges from **0** to **1**. The default value is **1**. |
57| width                 | \<length>                                                    | -             | Width value applied to the component after the animation is played. |
58| height                | \<length>                                                    | -             | Height value applied to the component after the animation is played. |
59| transform             | string                                                       | -             | Transformation type applied to the component. For details, see **transform**. |
60| background-position<sup>6+</sup> | string \| \<percentage> \| \<length> string \| \<percentage> \| \<length> | 50% 50%       | Position of the background image. The unit can be percentage or px. The first value indicates the horizontal position, and the second value indicates the vertical position. If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br>- background-position: 200px 30%<br>- background-position: 100px top<br>- background-position: center center |
61
62If 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. You can use a percentage value to specify an intermediate state of the animation.<sup>6+</sup> The following is an example:
63
64```html
65<!-- xxx.hml -->
66<div class="container">
67  <div class="rect">
68  </div>
69</div>
70```
71
72```css
73/* xxx.css */
74.container {
75  display: flex;
76  justify-content: center;
77  align-items: center;
78  margin: 150px;
79}
80.rect{
81  width: 200px;
82  height: 200px;
83  background-color: #f76160;
84  animation: Go 3s infinite;
85}
86@keyframes Go
87{
88  from {
89    background-color: #f76160;
90    transform:translate(100px) rotate(0deg) scale(1.0);
91  }
92  /* Specify the intermediate state of the animation by a percentage value.<sup>6+</sup> */
93  50% {
94    background-color: #f76160;
95    transform:translate(100px) rotate(60deg) scale(1.3);
96  }
97  to {
98    background-color: #09ba07;
99    transform:translate(100px) rotate(180deg) scale(2.0);
100  }
101}
102```
103
104![en-us_image_0000001173324797](figures/en-us_image_0000001173324797.gif)
105
106```html
107<!-- xxx.hml -->
108<div class="container">
109  <div class="simpleAnimation simpleSize" style="animation-play-state: {{playState}}"></div>
110  <text onclick="toggleState">animation-play-state: {{playState}}</text>
111</div>
112```
113
114```css
115/* xxx.css */
116.container {
117  flex-direction: column;
118  justify-content: center;
119  align-items: center;
120}
121.simpleSize {
122  background-color: blue;
123  width: 100px;
124  height: 100px;
125}
126.simpleAnimation {
127  animation: simpleFrames 9s;
128}
129@keyframes simpleFrames {
130  from { transform: translateX(0px); }
131  to { transform: translateX(100px); }
132}
133```
134
135```js
136// xxx.js
137export default {
138  data: {
139    title: "",
140    playState: "running"
141  },
142  toggleState() {
143    if (this.playState ===  "running") {
144      this.playState = "paused";
145    } else {
146      this.playState = "running";
147    }
148  }
149}
150```
151
152![en-us_image_0000001127285034](figures/en-us_image_0000001127285034.gif)
153
154```html
155<!-- xxx.hml -->
156<div id='img' class="img"></div>
157```
158
159```css
160/* xxx.css */
161.img {
162  width: 294px;
163  height: 233px;
164  background-image: url('common/heartBeat.jpg');
165  background-repeat: no-repeat;
166  background-position: 0% 0%;
167  background-size: 900%;
168  animation-name: heartBeating;
169  animation-duration: 1s;
170  animation-delay: 0s;
171  animation-fill-mode: forwards;
172  animation-iteration-count: -1;
173  animation-timing-function: steps(8, end);
174}
175
176@keyframes heartBeating {
177  from { background-position: 0% 0%;}
178  to { background-position: 100% 0%;}
179}
180```
181
182```html
183<!-- xxx.hml -->
184<div class="container">
185  <div class="content"></div>
186</div>
187```
188
189```css
190/* xxx.css */
191.container {
192    flex-direction: column;
193    justify-content: center;
194    align-items: center;
195}
196.content { /* Component state 1 */
197    height: 200px;
198    width: 200px;
199    background-color: red;
200    transition: all 5s ease 0s;
201}
202.content:active { /* Component state 2 */
203    height: 400px;
204    width: 400px;
205    background-color: blue;
206    transition: all 5s linear 0s;
207}
208```
209
210![en-us_image_0000001152833768](figures/en-us_image_0000001152833768.gif)
211
212> **NOTE**
213>
214> The @keyframes rule with **from** and **to** defined cannot be dynamically bound to an element.
215>
216> The following figure shows the meanings of **end** and **start** in the **steps** function.
217>
218> ![en-us_image_0000001127125220](figures/en-us_image_0000001127125220.png)