To address your query effectively, you can modify the HTML layout of your application slightly.
Create a container positioned absolutely with top and left values set to 15% and 50%, respectively. The H1 elements within this div should have position absolute (allowing them to overlap), but ensure that left and top values are not specified.
You can then animate the container by defining a new animation using @keyframes, specifying the top property of the container to transition from -30% (or any desired value) to 15%.
For a demonstration, refer to this fiddle:
https://jsfiddle.net/d58t2bau/
<div class='ctr'>
<h1 id='outer'>rainboz.io</h1>
<h1 id='inner'>rainboz.io</h1>
</div>
<div>
<form align="center">
<label id='spawnif'>this is the story of...</label>
<label id='spawnifin'>this is the story of...</label>
<input type='text' spellcheck='false' maxlength="20" autocomplete="off" id='nickname' placeholder="Nickname">
<button id='playbtnot'>Play</button>
<button id='playbtnin'>Play</button>
</form>
</div>
CSS:
#outer {
text-align: center;
position: absolute;
margin: 0;
padding: 0;
color: black;
font-size: 7rem;
font-family: coconbold;
font-weight: 100;
transform: translateX(-50%);
-webkit-text-stroke: 20px black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#inner {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
position: absolute;
margin: 0;
padding: 0;
font-family: coconbold;
font-weight: 100;
transform: translateX(-50%);
font-size: 7rem;
background: linear-gradient(45deg, rgba(255, 40, 40, 1) 15%, rgba(255, 121, 4, 1) 27%, rgba(252, 241, 73, 1) 40%, rgba(82, 252, 73, 1) 50%, rgba(73, 197, 252, 1) 60%, rgba(106, 53, 255, 1) 73%, rgba(150, 0, 214, 1) 85%);
background-size: 200%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: anim 4s linear infinite alternate;
}
@keyframes anim {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
#nickname {
box-align: center;
position: absolute;
border-radius: 90px;
top: 40%;
left: 50%;
margin: 0;
padding: 3px 10px 0 9px;
transform: translateX(-50%);
width: 30%;
height: 8%;
outline: none;
font-size: 50px;
font-weight: 1px;
border-color: lightgrey;
background-color: rgb(247, 247, 247);
border-width: 1px;
font-family: coconbold;
border-style: solid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
caret-color: grey;
}
input::placeholder {
color: transparent;
}
#spawnif {
box-align: center;
position: absolute;
border-radius: 90px;
top: 36%;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 20px;
font-family: coconbold;
color: black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-stroke: 6px black;
}
#spawnifin {
box-align: center;
position: absolute;
border-radius: 90px;
top: 36%;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 20px;
font-family: coconbold;
color: rgb(245, 244, 244);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#playbtnin {
box-align: center;
position: absolute;
border-radius: 90px;
width: 215px;
height: 50px;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 35px;
font-family: coconbold;
color: white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border-color: transparent;
border-style: solid;
border-width: 3px;
outline: none;
}
#playbtnot {
box-align: center;
position: absolute;
border-radius: 90px;
width: 215px;
height: 50px;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
font-size: 35px;
font-family: coconbold;
color: white;
background-color: rgb(180, 179, 255);
border-color: rgb(110, 107, 255);
background-size: 500px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-style: solid;
border-width: 3px;
outline: none;
-webkit-text-stroke: 6px black;
}
#playbtn:hover {
background-color: rgb(161, 171, 255);
border-color: rgb(103, 101, 255);
}
.ctr {
position: absolute;
top: 15%;
left: 50%;
animation-name: float-in;
animation-duration: 2s;
}
@keyframes float-in {
from {
top: -50%;
}
to {
top: 15%;
}
}