Sliding door effect, move elements with horizontal scroll by css instead of intersection observer

Question

I'm trying to move riv1 in one direction on scroll, for example left and riv2 in the opposite position on scroll to reveal the background but the code still doesn't work. I'm trying css like a different approach to intersection observer.

.riviste-background {
  background: url('../img/vincitrice.jpg');
  background-position: center center;
  background-size: 50% auto;
  background-repeat: no-repeat;
  display: flex;
  margin: 0;
  padding: 0;
  position: relative;
  justify-content: center;
  height: calc(150vh - 15vw);
}

.riviste-background>img {
  animation-timeline: view(auto);
  animation-duration: 800ms;
  animation-fill-mode: both;
}

.riviste {
  width: 500px;
  height: auto;
  margin-inline: 0;
  text-align: center;
  position: absolute;
}

#riv1 {
  transform: translateX(0);
  animation: slide-right linear;
}

#riv2 {
  transform: translateX(0);
  animation: slide-left linear;
}

@keyframes slide-right {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-75%)
  }
}

@keyframes slide-left {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(75%)
  }
}

<div class="row riviste-background">

  <img src="https://picsum.photos/500/400" alt="" class="riviste" id="riv1">
  <img src="https://picsum.photos/500/400" alt="" class="riviste" id="riv2">`
</div>