Q:

Como fazer o elemento desaparecer da tela depois de um segundo

Eu criei um código que os números aumentam e diminuem na tela com CSS, e criei as divs pelo javascript. No entanto eu preciso do "GO!" depois de um segundo e não conseguia descobrir.

 function start(){
                        var number = document.getElementById("number");        
                        number.innerHTML = `
                       
                        <div id="cinco">5</div>
                        <div id="quatro">4</div>
                        <div id="tres">3</div>
                        <div id="dois">2</div>
                        <div id="um">1</div>
                        <div id="go">GO!</div>
                       
                        `
                       
                      }  
.container {
 
  text-align: center;
  margin: 0 auto;
}

#cinco, #quatro, #tres, #dois, #um, #go {
  font-size: 0;
  animation: .5s ease-in-out 2 forwards alternate zoom;
}
#quatro {
  animation-delay: 1s;
}
#tres {
  animation-delay: 2s;
}
#dois {
  animation-delay: 3s;
}
#um {
  animation-delay: 4s;
}
#go {
  animation-delay: 5s;
  animation-iteration-count: 1;
 
}

@keyframes zoom {
    0% { font-size: 0; }  
    100% { font-size: 150px; }
 }
<body onload="start()">
    <div id="number" class="container"></div>
</body>

A:

Uma opção só com CSS seria... Primeiro cria um novo @keyframe e coloca nele o efeito de sumir que vc quer, como sua animação tem 5s coloca nesse novo @keyframe um animation-delay de 6s, assim quando a animação chegar ao final ele faz outra animação para desaparecer.

Como vc faz de font-size:0 para 150, eu usei transform: scale(0); para simular o mesmo efeito no container que tem o texto dentro, assim parece que é a mesma animação feita com font-size, mas na verdade é scale()
Segue o código da imagem acima:

function start() {
  var number = document.getElementById("number");
  number.innerHTML = `

  <div id="cinco">5</div>
  <div id="quatro">4</div>
  <div id="tres">3</div>
  <div id="dois">2</div>
  <div id="um">1</div>
  <div id="go">GO!</div>

  `

}
.container {

  text-align: center;
  margin: 0 auto;
}

#cinco,
#quatro,
#tres,
#dois,
#um,
#go {
  font-size: 0;
  animation: .5s ease-in-out 2 forwards alternate zoom;
}

#quatro {
  animation-delay: 1s;
}

#tres {
  animation-delay: 2s;
}

#dois {
  animation-delay: 3s;
}

#um {
  animation-delay: 4s;
}

#go {
  animation-delay: 5s;
  animation-iteration-count: 1;

}

@keyframes zoom {
  0% {
    font-size: 0;
  }

  100% {
    font-size: 150px;
  }
}

@keyframes some {
    to {
        transform: scale(0);
        transform-origin: center top;
    }
}

#number {
  animation: 0.5s some linear forwards;
  animation-delay: 6s;
}
<body onload="start()">
<div id="number" class="container"></div>

