1 Star 0 Fork 5.1K

youguilin / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
animation-styles.md 38.43 KB
一键复制 编辑 原始数据 按行查看 历史
mamingshuai 提交于 2021-06-02 01:00 . update OpenHarmony 2.0 Canary

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.

Name

Type

Default Value

Description

transform-origin

<percentage> | <length> <percentage> | <length>

Control center

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.

Example:

transform-origin: 200px 30%

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

ease

Speed curve of an animation, which makes the animation more fluent.

Available values are as follows:

  • linear: The animation speed keeps unchanged.
  • ease: The animation starts at a low speed and then accelerates. It slows down before the animation ends. cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • ease-in: The animation starts at a low speed. cubic-bezier(0.42, 0.0, 1.0, 1.0)
  • ease-out: The animation ends at a low speed. cubic-bezier(0.0, 0.0, 0.58, 1.0)
  • ease-in-out: The animation starts and ends at a low speed. cubic-bezier(0.42, 0.0, 0.58, 1.0)
  • friction: Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0)
  • extreme-deceleration: Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0) curve
  • sharp: Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0)
  • rhythm: Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0)
  • smooth: Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0)
  • 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.

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 Methods of the transform attribute

Name

Type

Description

translate

<length>| <percent>

Moves an element along the x-axis and y-axis.

translateX

<length>| <percent>

Moves an element along the x-axis.

translateY

<length>| <percent>

Moves an element along the y-axis.

scale

<number>

Changes the size of an element. You need to set the target width and height on the x-axis and y-axis.

scaleX

<number>

Changes the element width.

scaleY

<number>

Changes the element height.

rotate

<deg> | <rad>

Rotates an element. You can set the element to rotate around its x-axis or y-axis.

rotateX

<deg> | <rad>

Rotates an element around the x-axis.

rotateY

<deg> | <rad>

Rotates an element around the y-axis.

Table 2 Attributes available for the @keyframes rule

Name

Type

Default Value

Description

background-color

<color>

-

Background color applied to the component after the animation is played.

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.

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

1
https://gitee.com/yougl/docs.git
git@gitee.com:yougl/docs.git
yougl
docs
docs
master

搜索帮助