なぜ時間差で表示されないのでしょうか？

Question

ランダムに時間差で表示されるよう実装してみたのですが、
どうしても時間差で表示されません。
どうすれば時間差で表示されるでしょうか？

ご教授のほどよろしくお願いいたします。

<div id="str">
<span>s</span>
<span>p</span>
<span>a</span>
<span>n</span>
</div>

#str {
  background-color: #222;
  color: #fff;
  
}
.see {
  opacity: 1;
}
span {
  opacity: 0;
  transition: 1s;
}

document.querySelector('#str').addEventListener('mouseover',()=>{
  const span = document.querySelector('#str').children;
 for(let i = 0;i<50;i++){
    const ran = Math.floor(Math.random()* span.length);
        if(!span[ran].classList.contains('see')){
        setTimeout(() => {
        span[ran].classList.add('see');
        },100);
      }
 }
});

Answer 1

<style>
#str {
  padding-left: 1em;
  background-color: #222;
  color: #fff;
}
.anime > span {
  animation: anime 1s ease forwards;
}
span {
  opacity: 0;
}
@keyframes anime {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
</style>
<div id="str">
  <span>s</span>
  <span>p</span>
  <span>a</span>
  <span>n</span>
</div>
<script>
const str = document.getElementById('str');
const spans = document.querySelectorAll('#str > span');
str.addEventListener('mouseover', () => {
  str.classList.add('anime');
  spans.forEach(el => el.style.animationDelay = Math.random().toFixed(3) / 2 + 's')
}, {once: true});
</script>

Comments

[katopa165]

自分にはまったく想像もつかない実装方法を教えて頂きありがとうございます。
自分でもyasutomiさんのようなコードを書けるよう今後の参考にさせて頂きます。
ご回答ありがとうございました。

Answer 2

setTimeoutに渡す数値にiを掛けたら差は出ると思います。