How do I increase fade time in without slowing down?

Question

is that Fadeinout only has 10s how can I make it longer sla about 25s without slowing down? I suspect it’s changing Fadeinout for another, but I don’t know which

function mostrarNotificacao(cabecalho,conteudo){
                var x=document.getElementById("janela-base");
                var titulo=document.getElementById("titulo");
                var corpo=document.getElementById("corpo");
                corpo.innerHTML = conteudo;
                titulo.innerHTML = cabecalho;
                x.classList.remove("fechar");
                x.classList.add("visivel");
                setTimeout(function(){
                x.classList.remove("visivel");
            },10000);
            }
            function fechar(){
                var x=document.getElementById("janela-base");
                x.classList.remove("visivel");
                x.classList.add("fechar");
            }

* {-webkit-font-smoothing: antialiased;
                     -moz-osx-font-smoothing: grayscale;
                     text-shadow: rgba(0,0,0,.01) 0 0 1px;}
                    #janela-base{
                        position:fixed;
                        margin-left:50%;
                        top:0;
                        z-index: 1;
                        transform:translate(-50%);
                        min-width: 200px;
                        max-width: 300px;
                        min-height:90px;
                        max-height:400px;
                        box-shadow: 0px 0px 10px 0.2px;
                        border-radius:10px;
                        visibility: hidden;
                        word-wrap:break-word;
                        opacity: 0;
                        
                    }
                    .janela-titulo{
                        background-color:#6a7996;
                        width:100%;
                        max-width: 295px;
                        min-height: 30px;
                        max-height:30px;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        padding-left: 6px;
                        padding-right:1px;
                        font-family: arial;
                        line-height: 30px;
                        font-weight:700;
                    }
                    .janela-corpo{
                        background-color:#93b4ee;
                        min-height:90px;
                        max-height: 400px;
                        width:295px;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        padding-left: 1px;
                        padding-right:1px;
                        font-family: arial;
                        padding-left:3px;
                        padding-bottom:3px;
                        padding-right:3px;
                        
                    }
                    #corpo{
                    width:100%;
                    }
                    #janela-base.visivel{
                        visibility: visible;
                        animation: fadeInOut 10s;
                    }
                    #janela-base.fechar{
                        visibility:hidden;
                    }
                    @keyframes fadeInOut{
                        5%,95%{opacity:1;top:50px}
                        15%,85%{opacity:1;top:30px}
                    }
                    #btn-fechar{
                        position:absolute;
                        width:55px;
                        height:20px;
                        top:7px;
                        right:6px;
                        bottom:12px;
                        border-style: solid;
                        border-radius:3px;
                        color:#000205;
                        border-color: #000000;
                        background-color:rgba(0,0,0,.01);
                    }

<button onclick="mostrarNotificacao('titul','mensagin')">teste</button>
             
            
            <div id="janela-base">
                <div class="janela-titulo">
                <span id="titulo"></span>
                </div>
                <div class="janela-corpo">
                    <div id="corpo"></div>
                    <button id="btn-fechar" onclick="fechar()">X</button>
                </div>

            </div>