JavaScriptとcssで要素をふわっと表示させる

<div class="fade">
<p>ふわっとさせたいのだ</p>
</div>
<div class="fade">
<p>ふわっとさせたいでござる</p>
</div>

.fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 1.5s, transform 1s; }.fade.active { opacity: 1; transform: translateY(0px); }

<script type="text/javascript">
const targets = document.getElementsByClassName('fade'); for(let i = targets.length; i--;){ let observer = new IntersectionObserver((entries, observer) => { for(let j = entries.length; j--;){ if (entries[j].isIntersecting) { entries[j].target.classList.add('active'); } else{ entries[j].target.classList.remove('active'); } } }); observer.observe(targets[i]); } </script>