# Animation

Animate the modal block's appearance and disappearance, with specific transition durations.

<figure><img src="https://lh5.googleusercontent.com/JhARVN9upLzJZMhmxOBKJWlyL5jJTD8CPBBwcRRxmKs6-Md8F3KVbeqYF4gFGeozHzkQejvkK_B2d4YHZB2hrVHFV6hoj9L-jTCluJIE86ikVoWJQubLZA64T2GdNff8SBkvbFYGmxpHNBWof0NTjBDEftC8EfEJErlq7xf8gHaHD9NTqgW1IgznyDWKmg" alt=""><figcaption></figcaption></figure>

## Animation

Variety of animation types to choose from.

***Fade in***

***Slide in Left***

***Slide in Right***

***Slide in Top***

***Slide in Bottom***

***Scale in Centre***

***Scale in Left***

***Scale in Right***

***Scale in Top***

***Scale in V. Centre***

***Scale in V. Top***

***Scale in V. Bottom***

## Duration

The Transition Duration property defines how long the transition lasts.

<details>

<summary>Add duration</summary>

1. Select a Modal block
2. Navigate to the Animation tab
3. Find the duration property
4. Enter the desired transition duration value

</details>

{% content-ref url="broken-reference" %}
[Broken link](https://docs.cwicly.com/blocks/modal/broken-reference)
{% endcontent-ref %}