transform: translate(－);でimgが動かせない

前提・実現したいこと

スクロールした時にテキストと画像が指定した方向からふわっと出てくるアニメーションの練習をしていたのですが、画像だけその場でふわっと出てきてしまいます。理想としては右に寄っている画像は右から、左に寄っている画像は左からふわっと出したいのですが、なぜtransformが効いていないかのような動きになるんでしょうか？

該当のソースコード

HTML
<main>
      <div class="container">
      <ul>
        <li class="image-list"><img src="../images/works1.jpg" alt="">
        <p class="image-text">テキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p></li>
        <li class="while"></li>
        <li class="image-list"><img src="../images/works2.jpg" alt="">
          <p class="image-text">テキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p></li></li>
        <li class="while"></li>
        <li class="image-list"><img src="../images/works3.jpg" alt="">
          <p class="image-text">テキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p></li></li>
        <li class="while"></li>
        <li class="image-list"><img src="../images/works4.jpg" alt="">
          <p class="image-text">テキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p></li></li>
      </ul>
    </div><!-- /container -->
    </main>

CSS
main {
  padding-top: 100vh;
}

main ul {
  display: flex;
  flex-flow: column;
}

.image-list {
  position: relative;
}

.while {
  height: 300px;
}

.image-text {
  position: absolute;
  top: 20px;
  right: 0;
  background: rgb(126, 0, 0, 0.7);
  padding: 10px;
  color: white;
  transform: translateY(20px);
  transition: 1s;
  opacity: 0;
}

.container li:nth-of-type(3) .image-text, .container li:nth-of-type(7) .image-text {
  left: 0;
  right: auto;
}

.container img {
  display: block;
  opacity: 0;
  transition: 1s 1s;
}

.container li:nth-of-type(1) img, .container li:nth-of-type(5) img {
  transform: translateX(-20px);
}

.container li:nth-of-type(3) img, .container li:nth-of-type(7) img {
  margin-left: auto;
  transform: translateX(20px);
}


.container .show  img, .container .show .image-text {
  opacity: 1;
  transform: none;
}

js
const imageAnimation = document.querySelectorAll('.image-list');

document.addEventListener('scroll', function(){
  for(let i = 0; i < imageAnimation.length; i++) {
    const imageDistance = imageAnimation[i].getBoundingClientRect().top + imageAnimation[i].clientHeight *.5
  
  if(window.innerHeight > imageDistance) {
    imageAnimation[i].classList.add('show');
  }
}
});