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;
   }
}

animation-demo1

NOTE

The @keyframes rule with from and to defined cannot be dynamically bound to an element.