Css animation with translate problem only on mobile

Question

I have a problem with image animations only on mobile. On the desktop it works well and on the mobile when I enter the site for the first time, something wrong happens only the first time I enter. If I refresh the page, it works well on furniture. I mention that on the div below with texts it works ok but not on images.

.slide-in-left {
    animation-duration: 2s;
    animation-name: slide-in-left; 
}

.slide-in-right {
    animation-duration: 2s;
    animation-name: slide-in-right;
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

You can see in the gif below what is happening: https://gifyu.com/image/SM16Q

Thank you in advance.