> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/blocks/modal/animation.md).

# 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="/pages/-MUEWlf1nDlIQNfmrZbk" %}
[Broken mention](broken://pages/-MUEWlf1nDlIQNfmrZbk)
{% endcontent-ref %}