Animation Styles
This section describes the dynamic rotation, translation, and scaling effects supported by components. These effects can be set in the style attribute or css files.
Origin coordinates of the transforming object. The values can be numbers (px) or percentages (relative to the target of the animation). If only one value is set, the other value is 50% by default. |
|||
Translation, rotation, and scaling attributes. For details, see Table 1. |
|||
@keyframes rule. For details, see Table 2. |
|||
Delay for playing the animation, in ms or s, for example, 1000 ms or 1s. The default unit is ms. |
|||
Animation duration, in ms or s, for example, 1000 ms or 1s. The default unit is ms. |
|||
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. |
|||
Speed curve of an animation, which makes the animation more fluent. Available values are as follows:
|
|||
Start and end styles of the animation |
Table 1 Methods of the transform attribute
Changes the size of an element. You need to set the target width and height on the x-axis and y-axis. |
||
Rotates an element. You can set the element to rotate around its x-axis or y-axis. |
||
Table 2 Attributes available for the @keyframes rule
Background color applied to the component after the animation is played. |
|||
Opacity value applied to the component after the animation is played. The value ranges from 0 to 1. The default value is 1. |
|||
Width value applied to the component after the animation is played. |
|||
Height value applied to the component after the animation is played. |
|||
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;
transform:translate(100px) rotate(0deg) scale(1.0);
}
to {
background-color: #09ba07;
transform:translate(100px) rotate(180deg) scale(2.0);
}
}
NOTE: The @keyframes rule with from and to defined cannot be dynamically bound to an element.