Анимация срабатывает только после обновления сайта. Нужно чтобы анимация срабатывала после каждого перехода на последнюю страницу сайта

Kак сделать чтобы анимация срабатывала после каждого перехода на страницу, а не только после обновления сайта?

    <section class="about" id="about">
    </section>

    <section class="section-more" id="services">
    </section>

    <section class="projects" id="projects">
    </section>

    <section class="form-page" id="contacts">

        <div class="contact-sidebar">
        </div>
        <div class="wrapper-c">
    </div>

            <div class="links-container">

                <div class="copyright">Designed & Built with ❤ Copyright 2024 Anna</div>
    </section>

.copyright {
  font-family: Montserrat;
  font-size: 12px;
  word-wrap: break-word;
  letter-spacing: 1px;
  color: #e3e1df;
  opacity: 0;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transition: opacity 1s ease-out, transform 1s ease-out;
  -webkit-transition: opacity 1s ease-out,
    -webkit-transform 1s ease-out;
  animation-delay: 3s;
}
.copyright.visible {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        observer.unobserve(entry.target); // Зупинити спостереження після того, як анімація була виконана
                    }
                });
            });

            observer.observe(document.querySelector('.copyright'));
        });
    </script>