diff --git a/en/application-dev/reference/arkui-js/js-components-common-animation.md b/en/application-dev/reference/arkui-js/js-components-common-animation.md index 417c9af4ab1ab4796458a581798352faf31a94b5..e64610107f6f04ad7706197bc52b957e5e18f825 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-animation.md +++ b/en/application-dev/reference/arkui-js/js-components-common-animation.md @@ -1,396 +1,81 @@ -# Animation Styles - -Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or CSS files. - - -
- | -- | -- | -- | -
---|---|---|---|
- | -string6+ | <percentage> | <length> string6+ | <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. - - - - - |
-
- | -- | -- | -Translation, rotation, and scaling attributes. -For details, see Table 1. - |
-
- | -- | -- | -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. - |
-
- | -- | -- | -@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: -
|
-
- | -- | -- | -Mode of playing the animation. -
|
-
- | -- | -- | -Start and end styles of the animation -
|
-
- | -- | -- | -Current state of the animation. - - |
-
- | -- | -- | -Transition effect when the component status is switched. The following four attributes can be set through the transition attribute: -
|
-
- | -- | -- | -- | -
---|---|---|---|
- | -- | -- | -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. - |
-
- | -string | <percentage> | <length> string | <percentage> | <length> - |
-- | -Set the background image for a window. 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. - -
|
-