Animation Styles
Components support dynamic rotation, translation, and scaling effects. These effects can be set in the style attribute or .css files.
| Name | Type | Default Value | Description |
|---|---|---|---|
| transform | string | - | Translation, rotation, and scaling attributes. For details, see Table 1. |
| animation-name | string | - | @keyframes rule. For details, see Table 2. |
| animation-delay | <time> | 0 | Delay for playing the animation, in ms or s, for example, 1000 ms or 1s. |The default unit is ms. |
| animation-duration | <time> | 0 | Animation duration, in ms or s, for example, 1000 ms or 1s. |The default unit is ms. NOTE animation-duration must be specified. Otherwise, the duration is 0, which means the animation will not be played. |
| 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. |
| animation-timing-function | string | linear | Speed curve of an animation, which makes the animation more fluent. Available values are as follows: - linear: The animation speed keeps unchanged. - ease-in: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used - ease-out: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. - 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. |
| animation-fill-mode | string | none | Start and end styles of the animation. - none: No style is applied to the target before or after the animation is executed. - forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed. |
Table 1 transform
| Name | Type | Description |
|---|---|---|
| translateX | <length> | Moves an element along the x-axis. |
| translateY | <length> | Moves an element along the y-axis. |
| rotate | <deg> |<rad> | Rotates an element. |
NOTE
Only images of the original size can be rotated on lite wearables.
Table 2 @keyframes
| Name | Type | Default Value | Description |
|---|---|---|---|
| background-color | <color> | - | Background color applied to the component after the animation is played. |
| width | <length> | - | Width value applied to the component after the animation is played. |
| height | <length> | - | Height value applied to the component after the animation is played. |
| transform | string | - | Transformation type applied to a component. For details, see Table 1. |
If 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:
@keyframes Go
{
from {
background-color: #f76160;
}
to {
background-color: #09ba07;
}
}
NOTE
The @keyframes rule with from and to defined cannot be dynamically bound to an element.
你可能感兴趣的鸿蒙文章
harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)