Weird spacing issue?

So I'm trying to make a credit roll that starts from the bottom of the screen, moving all the way up until everything is out of frame without using any libraries, and right now, this is what it's looking like:

And there are two things that I dislike:

1. The space in between the role and the name is way too big. I haven't added any breaks for this to be happening, and I don't understand why that is.
2. The credit roll animation doesn't actually do anything at all. I think the issue lies within the CSS, but I'm not too sure.

Any help please?

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Pixelated;
  src: url(uni05_53.ttf);
}

h1 {
  font-family: Pixelated;
  color: white;
}

h3 {
  font-family: Pixelated;
  color: white;
  font-size: 25px;
}

.credits {
  text-align: center;
  width: 100%;
  height: 100%;
}

.credit {
  animation: creditRoll 15s linear forwards infinite;
}

@keyframes creditRoll {
  0% {
    top: 100%;
  }

  100% {
    top: -100%;
  }
}

Link: https://jsfiddle.net/3fz568hn/

1. The spacing is caused by CSS's default h margin. Set your h1 and h3 to margin: 0px to remove it or overwrite as you need it to.

2. Solution for animation, when doing those move animation, you need to specifiy positions with transform property rather than normal top, left, etc

.credits {
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: creditRoll 5s linear forwards;
}

   @keyframes creditRoll {
      0% {
        transform: translateY(100%);
      }
    
      50% {
        transform:translatey(0%);
      }
      100% {
        transform:translatey(-100%);
      }
   }

You don't need to use headings, better to specify div tags with margin:

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

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

let names = [
"You",
"DevBlizzard",
"DevBlizzard",
"DevBlizzard",
"somebodysomeon2",
"somebodysomeon2",
"! kat.#8355",
"fabianski987",
'AWSQ - ca8 <a href="https://playcanvas.com/project/744016/overview/awsq">(Link)',
'Uni 05_53 - Craig Kroeger'
];
let titles = [
"Dedicated and Beloved Player:",
"Mr. CEO:",
"NOT a war criminal:",
"Lead Programmer:",
"Assistant Programmer (not really):",
"Mr. Break-Your-Game:",
"Graphic Designer/Artist:",
"Composer/Sound Effect Designer:",
"Original Creation:",
"Font:"
];
let div = document.getElementById("credits")
for (let i = 0; i < titles.length; i++) {
let minidiv = document.createElement('div');
minidiv.className = 'credit';
let title = document.createElement('div');
title.className = 'title';
title.innerHTML = titles[i]; 
minidiv.appendChild(title);
let name = document.createElement('div');
name.className = 'name';
name.innerHTML = names[i];
minidiv.appendChild(name);
div.appendChild(minidiv);
}

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

body {
background-color: black;
margin: 0;
padding: 0;
}
@import url('https://fonts.cdnfonts.com/css/public-pixel');
#credits {
text-align: center;
width: 100%;
height: 100%;
animation: creditRoll 15s linear forwards infinite;
}
#credits .title {
font-family: 'Public Pixel', sans-serif;
color: white;
font-size: 16px;
margin: 5px 0;
}
#credits .name {
font-family: 'Public Pixel', sans-serif;
color: white;
font-size: 16px;
margin-bottom: 20px;
}
@keyframes creditRoll {
0% {
top: translateY(100%);
}
100% {
top: translateY(0%);
}
}

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

<link href="https://fonts.cdnfonts.com/css/public-pixel" rel="stylesheet">
<div id="credits">
</div>

<!-- end snippet -->

I don't have the credits.js, so this does not show the animation.