# Animation
# Common User Interface Animations
In Mini Programs, you can use CSS transitions and CSS animations to create simple UI animations.
You can also use the wx.createAnimation API to create simple animation effects dynamically.
During the animation creation, you can use bindtransitionend, bindanimationstart, bindanimationiteration, and bindanimationend to listen to animation events.
| Event | Description |
|---|---|
| transitionend | A CSS transition ends or a step of wx.createAnimation ends |
| animationstart | CSS animation starts |
| animationiteration | A step of CSS animation ends |
| animationend | A CSS animation ends |
Note: These events are not bubbling events and need to be bound to the node that is being animated to take effect.
# Advanced Animations
The above animations may not be applicable to complicated scenarios.
You can dynamically adjust the "style" property of a node by responding to events with WXS. Changing the value of "style" continuously can produce animation effects. And this method can be used to dynamically generate animations based on users' touch events.
Animation effects can also be achieved by using setData to change the user interface continuously. This can change the interface arbitrarily, but usually produces a large delay or stutter, and even causes the Mini Program to freeze. In this case, you can improve performance by changing the setData of the page to the setData in custom components. The following example shows how to generate a stopwatch animation using setData.