<header>üst</header>

<main>ana</main>

<footer>alt</footer>

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  color: white;
  overflow: hidden;
}
main {
  padding: 75px 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: blue;
}

footer, header {
  background: red;
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 75px;
  z-index: 50;
  animation: alttan_gel 2s ease 3s forwards alternate; /*2s uzunluğunu belirtiyor, 3s ne kadar gecikmeli başlayacağını*/
}

header {
  top: -100%;
  bottom: inherit;
  background: green;
  animation-name: ustten_gel;
}

@keyframes alttan_gel {
 from { bottom: -100%; } 
 to { bottom: 0; }  
}

@keyframes ustten_gel {
 from { top: -100%; } 
 to { top: 0; }  
}