Animações CSS não funcionam com `display`. Se você quer que o parágrafo fique oculto após 1 segundo, você até poderia usar uma combinação de `visibility: hidden` com JavaScript, onde o JavaScript detectaria o fim da animação para aplicar um `display: none` no elemento:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    document.addEventListener("DOMContentLoaded", function(){
       const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
       eventos.forEach((e)=>{
          document.getElementById("text").addEventListener(e, function(){
             this.style.display = "none";
          });
       });
    });

<!-- language: lang-css -->

    #text {
       animation: anima1 1s linear forwards;
    }

    @keyframes anima1 {
       100% {
          visibility: hidden;
       }
    }

<!-- language: lang-html -->

    <p id="text">Text</p>
    Qualquer coisa aqui

<!-- end snippet -->

O `visibility: hidden` faz o elemento ficar invisível, mas ele continua ocupando espaço na página. O JavaScript detecta quando a animação do CSS termina e aplica o `display: none`.

Porém, já que, se for usar JavaScript, não precisa, neste caso, usar animação no CSS e o JavaScript ao mesmo tempo. Basta usar apenas JavaScript mais simples com `setTimeout`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    document.addEventListener("DOMContentLoaded", function(){
       setTimeout(function(){
          document.getElementById("text").style.display = "none";
       }, 1000);
    });

<!-- language: lang-html -->

    <p id="text">Text</p>
    Qualquer coisa aqui

<!-- end snippet -->

Onde tem o valor `1000` é igual a 1 segundo. O valor do tempo do `setTimeout` é em milissegundos. Então basta você multiplicar os segundos que quer por 1000 (ex.: 5 segundos = 5000).

Agora, se você quer um efeito de transição, poderia usar `opacity` no lugar de `visibility`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    document.addEventListener("DOMContentLoaded", function(){
       const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
       eventos.forEach((e)=>{
          document.getElementById("text").addEventListener(e, function(){
             this.style.display = "none";
          });
       });
    });


<!-- language: lang-css -->

    #text {
       animation: anima1 1s linear forwards;
    }

    @keyframes anima1 {
       100% {
          opacity: 0;
       }
    }

<!-- language: lang-html -->

    <p id="text">Text</p>
    Qualquer coisa aqui

<!-- end snippet -->