Safari Page Load Animation Issue on First Access

I’m experiencing a challenging issue with Safari concerning the page load animation. Specifically, when I first open the main page, the load animation doesn’t initiate. However, if I navigate away to another page and then return to the main page, the animation starts functioning as expected.

I don’t believe the animation properties is the problem, as the animation plays correctly after navigating to another page and then returning to the main page.

Intriguingly, this problem does not occur in Chrome, where the page load animation works perfectly from the first visit.

Safari Version I am testing on: Safari 17.6 (19618.3.11.11.5)
I also checked on old safari versions on browserstack. The issue is consistent on all safari on all devices (ios, macOs, ipad).

Below is the animation properties I am using

.slideUp {
  animation: slide-up 20s alternate linear infinite;
  --webkit-animation: slide-up 20s alternate linear infinite;

}

@keyframes slide-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}