animations in css don't work when going into the page with hyperlink

I created a website using html and css, and the animations function well when I reload the page, but when I go into the page using a hyperlink, they just don't happen. I tried modifying my code, but I don't really know the source of the problem. I added a Javascript script that forces the website to reload everytime it is entered by navigation, and technically the animations worked, but there was some sort of glitch. Due to the fact that the website was sort of loaded twice. Here you can see my whole source code. This is my first website, so I don't really know which are the most important parts. You just don't have access to 2 images, but I doubt that this is important.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
:root {
  --bg-color: #0c0c0c;
  --text-color: #fff;
  --main-color: #4d7a33;

  --big-font: 6.6rem;
  --p-font: 1rem;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 1000;
  padding: 35px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s ease;
}

.logo img {
  width: 220%;
  height: auto;
    color: var(--main-color);
}

.navlist {
  display: flex;
}
.navlist a {
  display: inline-block;
  margin: 0 35px;
  color: var(--text-color);
  font-size: var(--p-font);
  transition: all 0.6s ease;
}
.navlist a:hover {
  color: var(--main-color);
}

.right-content {
  display: flex;
  align-items: center;
}

.nav-btn {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.2rem;
  background: transparent;
  padding: 10px 20px;
  border: 2px solid var(--text-color);
  border-radius: 5px;
  font-weight: 500;
  transition: all 0.6s ease;
}
.nav-btn:hover {
  transform: translateY(-5px);
  border: 2px solid var(--main-color);
  color: var(--main-color);
}

#menu-icon {
  font-size: 42px;
  z-index: 10001;
  cursor: pointer;
  margin-left: 25px;
    display: none;
}

section{
    padding: 0 14%;
}

.hero{
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 2rem;
}
.hero-img img{
    width: 100%;
    height: auto;
}
.hero-text h1{
    font-size: var(--big-font);
    font-weight: 900;
    margin: 15px 0;
}
.hero-text h2{
    font-weight: 800;
    letter-spacing: .5px;
}
.hero-text p{
    width: 100%;
    max-width: 620px;
    font-size: var(--p-font);
    font-weight: 400;
    line-height: 32px;
    color: var(--text-color);
    margin-bottom: 40px;
}
.main-hero{
    display: flex;
    align-items: center;
}
.btn{
    display: inline-block;
    padding: 13px 32p;
    background: var(--main-color);
    border: 2px solid transparent;
    border-radius: 7px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    transition: all .6s ease;
    margin-right: 20px;
}
.btn:hover{
    transform: scale(1.1);
}

.icons{
    position: absolute;
    top: 50%;
    padding: 0 7%;
    transform: translateY(-50%);
}
.icons i{
    display: block;
    margin: 35px 0;
    color: var(--text-color);
    font-size: 23px;
    transition: all .6s;
}
.icons i:hover{
    transform: translateY(-5px);
    color: var(--main-color);
}

.animate-on-load {
  animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Nathan Vidal</title>
    <link href="nathan.css" type="text/css" rel="stylesheet" />

    <box-icon type="solid" name="home-alt-2"></box-icon>

    <link
      rel="stylesheet"
      href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  </head>

  <body>
    <header>
      <a class="animate-on-load" href="page1.html" class="logo">
        <img src="assets/home-alt-2-solid-24.png" height="50" alt="Logo" />
      </a>
      <ul class="navlist" class="animate-on-load">
        <li><a href="pol.html">Pol</a></li>
        <li><a href="brieuc.html">Brieuc</a></li>
        <li><a href="tugdual.html">Tugdual</a></li>
      </ul>
      <div class="right-content" class="animate-on-load">
        <a href="https://www.dreamworks.com/movies/shrek" class="nav-btn"
          >Shrek</a
        >
        <div class="bx bx-menu" class="animate-on-load" id="menu-icon"></div>
      </div>
    </header>

    <section class="hero" class="animate-on-load">
      <div class="hero-text" class="animate-on-load">
        <h1 data-aos="fade-down" class="animate-on-load">Mes loisirs:</h1>
        <h2 data-aos="fade-up" class="animate-on-load">La programmation</h2>
        <p>J'aime beaucoup programmer, en C, C++, Python...</p>
        <h2 data-aos="fade-up" class="animate-on-load">La voile</h2>
        <p>Je fais de l'ILCA 6 en competition</p>
        <h2 data-aos="fade-up" class="animate-on-load">La boxe thailandaise</h2>
        <p>Je ne sais pas quoi dire.</p>
        <h2 data-aos="fade-up" class="animate-on-load">
          J'aime bien Shrek aussi
        </h2>
        <div data-aos="fade-right" class="animate-on-load" class="main-hero">
          <a
            href="https://en.wikipedia.org/wiki/C++"
            class="animate-on-load"
            class="btn"
            >C++ sur Wikipedia,</a
          >
          <br />
          <a
            href="https://en.wikipedia.org/wiki/Muay_Thai"
            class="animate-on-load"
            class="btn"
            >La Boxe thailandaise sur Wikipedia,</a
          >
          <br />
          <a
            href="https://en.wikipedia.org/wiki/Laser_Radial"
            class="animate-on-load"
            class="btn"
            >L'ILCA 6 sur Wikipedia</a
          >
        </div>
      </div>
      <div class="hero-img" class="animate-on-load">
        <img
          src="assets/shrek-image.png"
          width="0"
          height="0"
          alt="Shrek Image"
        />
      </div>
    </section>

    <div class="icons" class="animate-on-load">
      <a href="github.com/bongstong"><i class="ri-github-fill"></i></a>
      <a href="https://www.instagram.com/shrek/"
        ><i class="ri-instagram-line"></i
      ></a>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      AOS.init({
        offset: 1,
      });
    </script>
  </body>
</html>

Solution

The transition property works only when the properties change, not when they're first set up.
You either need to use @keyframes or create a class that you'll be adding with JS when the page loads.

let square = document.querySelectorAll('.item')[1]
window.onload = () => {
  square.classList.add('red')
}

.item{
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: green;
}
.red{
  background-color: red;
  transition: all 6s ease;
}
.item:first-child{
  animation: toBlue 6s ease-out forwards;
}
@keyframes toBlue {
  from {
    background-color: green;
  }
  to {
    background-color: blue;
  }
}

<div class="item">Keyframes</div>
<div class="item">JavaScrips</div>

Similar question: css3 transition animation on load?

_{P. S. This answer was about keyframes before edit.}