# Animation

![animation-01][animation-01]  
You can configure animations for components that will be triggered when transitioning between preview and monitoring modes.

- Properties

  - Delay - Waiting time before starting the animation
  - Duration - Duration of each round of animation
  - Interval - Time interval between animations
  - Repeat - Whether the animation should automatically repeat
  - Auto Play - Whether the animation should start automatically when the component is created
  - Delta - Animation Delta Function that controls the animation's progress
  - Ease - Timing of the Animation Delta Function
    - In - Entry point
    - Out - Completion point
    - InOut - Entry and completion points

- Types of Animations

1. Rotation
   ![animation-02][animation-02]
   ![animation-03][animation-03]
1. Vibration  
   ![animation-04][animation-04]
1. Heartbeat  
   ![animation-05][animation-05]
1. Moving
   ![animation-06][animation-07]
   ![animation-07][animation-06]
   ![animation-08][animation-09]
   ![animation-09][animation-08]
1. Outline  
   ![animation-10][animation-10]

[animation-01]: ../images/animation-01.gif
[animation-02]: ../images/animation-02.gif
[animation-03]: ../images/animation-03.gif
[animation-04]: ../images/animation-04.gif
[animation-05]: ../images/animation-05.gif
[animation-06]: ../images/animation-06.gif
[animation-07]: ../images/animation-07.gif
[animation-08]: ../images/animation-08.gif
[animation-09]: ../images/animation-09.gif
[animation-10]: ../images/animation-10.gif