Keyframe Animation Pulling Entire Page Down - What's Wrong? - css

Question

I am currently working on a website of my own and I'm trying to implement a cool animation on page load, where the navbar fades in, and the center image both fades in and rises up to where it is supposed to be on the page.
I got both of these transitions implemented easily, but the only problem is that when the center image animation acts on the page, it pulls the entire page down, I attached a little clip of it happening on my site to this post.
I would like it so that when the page loads, the animation does not move the entire page down with it, and instead the scroll wheel is at the top at the end of the animation.
My react component:
`
import React from "react";
import tenGreenLogo from "../images/10Green Logo Black (1).png";
import "./HomeContent.css";`
function HomeContent() {
return (
<>
<div className="center-div">
<img src={tenGreenLogo}></img>
</div>
<div className="globe-div">
<div className="globe"></div>
</div>
</>
);
}
export default HomeContent;
`
and my CSS:
`
.center-div {
display: flex;
justify-content: center;
align-items: center;
padding-top: 7rem;
padding-bottom: 7rem;
}
.center-div img {
width: 40rem;
animation: transitionIn 1s;
}
.globe-div {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
padding-bottom: 5rem;
padding-top: 5rem;
}
.globe {
border-radius: 50%;
width: 100rem;
height: 100rem;
background-color: #67cfcf;
display: inline-block;
}
#keyframes transitionIn {
from {
opacity: 0;
transform: translateY(4rem);
}
to {
opacity: 1;
transform: translateY(0rem);
}
}
`
Does anybody know what could be happening here?
I have tried putting the animation property both on the image itself as well as the div it is nested in, but neither of those appear to solve the problem. I am hoping that I can make it so the page does not get pulled down when the animation loads.