Javascript animation glitch

I have written a simple function .onload where a 'p' and 'h1' tag go from opacity:0; to opacity 1;. The animation is fine and everything but sometimes while the animation is happening, it looks like the p and h1 tags have a background-color set to gray while the animation is happening and then it disappears once the animation ends and this only occurs on firefox. see animation bug here

const abouth1 = document.querySelector(".about-h1");
const aboutp = document.querySelector(".about-p");
const logo = document.querySelector(".logo");

function fadeFunction() {
  abouth1.classList.add("about-show-h1");
  aboutp.classList.add("about-show-p");
  logo.classList.add("logo-show");
}

window.onload = fadeFunction();

.about-h1 {
  opacity: 0;
  transition: 1.5s;
  transform: translateX(45%);
}

.about-p {
  margin-top: 1.25em;
  font-size: 1rem;
  opacity: 0;
  transition: 2s;
  transform: translateX(-65%);
}
.about-show-p {
  opacity: 1;
  transform: translateX(0);
}

.about-show-h1 {
  opacity: 1;
  transform: translateX(0);
}

 <h1 class="about-h1">
            My name is Drinos Shala, <br />
            and I am a senior software developer who <br />
            specializes in front-end technologies.
          </h1>
          <p class="about-p">
            My job is to ensure your website is pixel perfect in every
            dimension,
            <br />
            years of working in this field have granted me the experience needed
            <br />
            to deploy every website I start in great success! <br />Let's get in
            touch so we can get started on your dream website for your dream
            business.
          </p>