Анимация в css не работает при переходе на страницу с гиперссылкой ⇐ CSS

[Anonymous]

Я создал веб-сайт с использованием HTML и CSS, и анимация работает хорошо, когда я перезагружаю страницу, но когда я захожу на страницу с помощью гиперссылки, она просто не происходит.
Я пробовал изменить свой код , но я действительно не знаю источника проблемы. Я добавил сценарий Javascript, который заставляет веб-сайт перезагружаться каждый раз, когда на него заходят с помощью навигации, и технически анимация работала, но произошел какой-то сбой. Из-за того, что сайт как бы загружался дважды.
Здесь вы можете увидеть весь мой исходный код. Это мой первый веб-сайт, поэтому я не знаю, какие его части являются наиболее важными. У вас просто нет доступа к 2 изображениям, но я сомневаюсь, что это важно.

Код: Выделить всё

* {
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;
}
}

Код: Выделить всё

Nathan Vidal
[*]










[url=page1.html]
[i]
[/url]
[list]
[url=pol.html]Pol[/url]
[*][url=brieuc.html]Brieuc[/url]
[*][url=tugdual.html]Tugdual[/url]
[/list]

[url=https://www.dreamworks.com/movies/shrek]Shrek






Mes loisirs:
La programmation
J'aime beaucoup programmer, en C, C++, Python...
La voile
Je fais de l'ILCA 6 en competition
La boxe thailandaise
Je ne sais pas quoi dire.

J'aime bien Shrek aussi


C++ sur Wikipedia,

La Boxe thailandaise sur Wikipedia,

L'ILCA 6 sur Wikipedia



[img]assets/shrek-image.png[/img]
          width="0"
height="0"
alt="Shrek Image"
/>



[/i][/url]
[url=https://www.instagram.com/shrek/][/url]



AOS.init({
offset: 1,
});

Подробнее здесь: https://stackoverflow.com/questions/793 ... -hyperlink