Animation in css

Question

I have a code in html that when I click on the button it opens a modal, and inside the modal I have another button to close, and I would like to put an animation at the opening and closing time, for example it will fade or something like....

javascript

function openModal(){
        var i = document.getElementById('i').value;
        if (i == '0') {
            document.getElementById('i').value = '1';
            document.getElementById('modal').style = 'display: flex;';
        }else{
            document.getElementById('i').value = '0';
            document.getElementById('modal').style = 'display: none;';
        }
    }

CSS

*{margin: 0;}
    .btn {
        background: #3498db;
        background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
        background-image: -moz-linear-gradient(top, #3498db, #2980b9);
        background-image: -ms-linear-gradient(top, #3498db, #2980b9);
        background-image: -o-linear-gradient(top, #3498db, #2980b9);
        background-image: linear-gradient(to bottom, #3498db, #2980b9);
        -webkit-border-radius: 8;
        -moz-border-radius: 8;
        border-radius: 8px;
        text-shadow: 6px 3px 9px #000000;
        -webkit-box-shadow: 0px 1px 3px #000000;
        -moz-box-shadow: 0px 1px 3px #000000;
        box-shadow: 0px 1px 3px #000000;
        font-family: Arial;
        color: #ffffff;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
    }

    .btn:hover {
        background: #3cb0fd;
        background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
        background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
        text-decorationecoration: none;
    }
    .modal{
        width: 100vw;
        height: 100vh;
        background: #00000078;
        display: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .window{
        width: 900px;
        height: 500px;
        background: #fff;
        border-radius: 5px;
    }
    .close_btn{
        width: 25px;
        height: 25px;
        background-image: url(image/close.png);
        background-size: 24px;
        float: right;
    }
    .close_btn:hover{
        background-image: url(image/close_hover.png);
    }
    .bar{
        background-color: black;
        height: 25px;
        border-radius: 5px 5px 0px 0px;
    }

HTML

<div class="modal" id="modal">
    <div class="window" id="window">
        <div class="bar" id="bar">
            <div class="close_btn" id="close_btn" onclick="openModal()"></div>
        </div>
        <input type="hidden" name="i" id="i" value="0">
    </div>
</div>
<input type="button" href="#" class="btn" onclick="openModal()" id="bnt" value="Upload...">

Answer 1

Only add these properties in the css of . modal

animation-duration: 3s;
animation-name: slidein;
animation-directioniteration-count: infinite;

and add the following animation in css

@keyframes slidein {
        from {
            margin-left: 100%;
            width: 300%; 
        }

        to {
            margin-left: 0%;
            width: 100%;
        }
    }

thank you very much.