Html Question posted in
Some basic documentation can be found here.

Html – 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. I asked few LLMs to help me, but they were unable to give me a good solution.
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.

<!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/[email protected]/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>

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

2

Answers


  1. 0

    If you mean that the result of the animation disappears when it ends, then the following code should fix your issue:

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

    If I misunderstood your problem, then the issue is not reproducible.

    Login or Signup to reply.
  2. 0

    The issue you described with animations not playing when navigating between pages via hyperlinks is likely due to the way the browser handles navigation. When you navigate to another page within the same site, the browser doesn’t always perform a “hard reload.” Instead, it retains the DOM state, meaning that the animations that are set to play on page load won’t trigger again unless explicitly reset.

    Here’s a clean and effective way to resolve this issue without forcing a full page reload:

    Solution: Reset Animations on Navigation

    Use JavaScript to detect when a page is loaded via navigation and reinitialize the animations. Here’s how you can implement it:

    Update Your JavaScript

    Add a script to reinitialize animations when the page is accessed via navigation links:

    // Function to reset animations
function resetAnimations() {
  const animatedElements = document.querySelectorAll('.animate-on-load');
  animatedElements.forEach((element) => {
    element.style.animation = 'none'; // Disable animation
    element.offsetHeight; // Trigger a reflow
    element.style.animation = ''; // Re-enable animation
  });
}

// Add event listeners to all navigation links
document.querySelectorAll('a[href]').forEach((link) => {
  link.addEventListener('click', (event) => {
    // Delay navigation to reset animations
    event.preventDefault();
    const href = link.getAttribute('href');
    resetAnimations(); // Reset animations
    setTimeout(() => {
      window.location.href = href; // Navigate after a slight delay
    }, 0);
  });
});

// Ensure animations work on initial load
resetAnimations();

    How This Works:

    1. Reset Animations: The resetAnimations function resets the animation by temporarily disabling and re-enabling it.
    2. Navigation Handling: When a navigation link is clicked, the script intercepts the click event, resets animations, and then performs navigation after a short delay.
    3. Initial Load: Animations are reset on initial page load for consistency.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search