# Animation in ASP.NET CORE Dialog

The Dialog can be animated during the open and close actions. Users can also customize the animation's [`delay`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Popups.DialogAnimationSettings.html#Syncfusion_EJ2_Popups_DialogAnimationSettings_Delay), [`duration`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Popups.DialogAnimationSettings.html#Syncfusion_EJ2_Popups_DialogAnimationSettings_Duration), and [`effect`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Popups.DialogAnimationSettings.html#Syncfusion_EJ2_Popups_DialogAnimationSettings_Effect).

<!-- markdownlint-disable MD033 -->
<table>
<tr>
<td>
delay</td><td>
The Dialog animation starts after the specified delay.</td></tr>
<tr>
<td>
duration</td><td>
Specifies the animation duration to complete one animation cycle.</td></tr>
<tr>
<td>
effect</td><td>
Specifies the animation effect for the Dialog open and close actions.
<br /><br />
List of supported animation effects:
<br />
'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' |
'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' |
'Zoom' | 'None'
<br /><br />
If the `Fade` effect is set, the Dialog opens with the `FadeIn` effect and closes with the `FadeOut` effect.
</td></tr>
</table>

In the following example, the `Zoom` effect is enabled. As a result, the Dialog opens with the `ZoomIn` effect and closes with the `ZoomOut` effect.

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}

<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Modal Dialog"></ejs-button>
    <ejs-dialog id='dialog' header='Dialog' content='Dialog enabled with Zoom effect' target='#container' width='250px'>
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
        <e-dialog-animationsettings effect="Zoom" duration="400" delay="0"></e-dialog-animationsettings>
    </ejs-dialog>
</div>

<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>

{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
public class HomeController : Controller
{
    public class ButtonModel
    {
        public string content { get; set; }
        public string cssClass { get; set; }
    }

    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { cssClass = "e-flat", content = "OK" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
        return View();
    }
}
{% endhighlight %}
{% endtabs %}