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

Question

前提・実現したいこと

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

該当のソースコード

<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>

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;
}

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');
  }
}
});

試したこと

見にくいコードで申し訳ないです。
検証ツールで該当の画像を調べたところ、transformは反映されていました。タイプエラーの表示もありませんでした。

補足情報（FW/ツールのバージョンなど）

dynabook V72/JLE
型番:PV82JLECNRDQE

Answer 1

.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;
}

上記の.container .show imgセレクタの詳細度が、.container li:nth-of-type(1) img等のセレクタより低いのが原因ですね。

詳細度 - CSS: カスケーディングスタイルシート | MDN

このセレクタの詳細度を上げればいいでしょう。例えば、

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

Comments

[amagiri]

解決しました！詳細度って忘れたころにやってくる感じで頭から抜けてました、ありがとうございます！