1# Property Animation (animation)
2
3With property animations, you can animate changes to certain component properties, such as [width](ts-universal-attributes-size.md#width), [height](ts-universal-attributes-size.md#height), [backgroundColor](ts-universal-attributes-background.md#backgroundcolor), [opacity](ts-universal-attributes-opacity.md#opacity), [scale](ts-universal-attributes-transformation.md#scale), [rotate](ts-universal-attributes-transformation.md#rotate) and [translate](ts-universal-attributes-transformation.md#translate). In a property animation that involves width and height changes, a component's content (such as text, [canvas](ts-components-canvas-canvas.md#canvas) content, and [linear gradient](ts-universal-attributes-gradient-color.md#lineargradient)) is changed straight to the final state. To enable the content to change with the width and height during the animation process, use the [renderFit](ts-universal-attributes-renderfit.md#renderfit) attribute.
4
5> **NOTE**
6>
7> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> **Widget capability**: This API can be used in ArkTS widgets since API version 9.
10
11## APIs
12
13animation(value:AnimateParam)
14
15**Atomic service API**: This API can be used in atomic services since API version 11.
16
17**Parameters**
18| Name   | Type                               | Mandatory| Description                                   |
19| ----- | --------------------------------- | ---- | ------------------------------------- |
20| value | [AnimateParam](ts-explicit-animation.md#animateparam) | Yes   | Animation settings.                          |
21
22## Example
23```ts
24// xxx.ets
25@Entry
26@Component
27struct AttrAnimationExample {
28  @State widthSize: number = 250
29  @State heightSize: number = 100
30  @State rotateAngle: number = 0
31  @State flag: boolean = true
32
33  build() {
34    Column() {
35      Button('change size')
36        .onClick(() => {
37          if (this.flag) {
38            this.widthSize = 150
39            this.heightSize = 60
40          } else {
41            this.widthSize = 250
42            this.heightSize = 100
43          }
44          this.flag = !this.flag
45        })
46        .margin(30)
47        .width(this.widthSize)
48        .height(this.heightSize)
49        .animation({
50          duration: 2000,
51          curve: Curve.EaseOut,
52          iterations: 3,
53          playMode: PlayMode.Normal
54        })
55      Button('change rotate angle')
56        .onClick(() => {
57          this.rotateAngle = 90
58        })
59        .margin(50)
60        .rotate({ angle: this.rotateAngle })
61        .animation({
62          duration: 1200,
63          curve: Curve.Friction,
64          delay: 500,
65          iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times.
66          playMode: PlayMode.Alternate,
67          expectedFrameRateRange: {
68            min: 20,
69            max: 120,
70            expected: 90,
71          }
72        })
73    }.width('100%').margin({ top: 20 })
74  }
75}
76```
77
78![animation](figures/animation.gif)
79