ajuda com transition-delay | HTML5 e CSS3 II: Turbinando as suas páginas

Bom dia pessoal estou fazendo um modal para apresentar uma mensagem de erro. segue codigo abaixo

HTML

<button type="button" class="btn btn-primary" onclick="javascript:legislacao('form1');">Gerar PDF</button>
<!-- Inicio Modal -->
<div id="meuModal" class="modal">
     <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
            <p>ARQUIVO NÃO DISPONIVEL..</p>
      </div>
</div>

JavaScript

function modal(){
    var modal = document.getElementById('meuModal'); // Pega o Modal
    var span = document.getElementsByClassName("close")[0]; // Obtem o elemento que fecha o Modal
    modal.style.display = "block"; // Abre o Modal
    // Quando o Usuario Clica em X fecha o Modal
    span.onclick = function() { 
        modal.style.display = "none";
    }
}

CSS

.modal {
    display: none; /* Ocultar (padrao) */
    position: fixed; /* deixa posição fixa na tela */
    z-index: 1; /* fixar no top */
    padding-top: 200px; /* Localização da Caixa */
    left: 0;
    top: 0;
    width: 100%; /* Largura Total */
    height: 100%; /* Altura Total */
    overflow: auto; /* Ativar Rolagem se necessário */
    background-color: rgb(0,0,0); /* Cor de Fundo (preto) */
    background-color: rgba(0,0,0,0.59); /* Transparencia (preto) */
}

/* Conteudo do Modal */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 50%;
    height: 15%;
    font-family: "Arial", sans-serif;
}

/* Botão Fechar */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding: 2px;
    border: 1px solid #888;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

esse codigo está funcionando certinho mas o que estou tentando fazer é suavizar a aparição do fundo preto transparente usando transition-delay,

tentei colocar junto na funcao modal do java script porem sem sucesso.

alguem pode me ajudar, Obrigado.

Opa, e ai como vai??

Bem eu resolvi usando CSS, coloquei no modal:

animation: fade-in 0.5s forwards;

e adicionei ao CSS:

@keyframes fade-in{
  from{
    background-color: rgba(0,0,0,0);
  }
  to{
    background-color: rgba(0,0,0,0.59);
  }
}

O curioso aqui é, sempre que o display vai de none para block ele vai repetir essa animação. Isso acontece com todo display none para block.

Tenho o seu codigo rodando neste link, caso queira mudar o tempo da suavização é só mudar em animation.

https://codepen.io/pedrobslisboa/pen/zjBPvG?editors=0100

Link para o código rodando.

OBS: Caso não seja esta a solução que você queira é só falar que soluciono de outra maneira :) E é claro se ainda não entende bem como funciona o keyframes porém explicar e indicar links de estudos da w3school também.