<div>
  <div class="hoge">hoge</div>
  <div id="piyo" class="fuga">piyo</div>
</div>

@keyframes fadein {
  from { 
    opacity: 0;
    transform: rotate(0.5turn);
  }
  to { 
    opacity: 1;
    transform: rotate(0turn);
  }
}

.unko {
  animation: 1s fadein;
}

.hoge {
  height: 600px;
  width: 200px;
  background: #10bace;
}

.fuga {
  width: 200px;
  height: 600px;
  background: tomato;
}

const c = (entries: IntersectionObserverEntry[]) =>
  entries
    .filter((e) => e.isIntersecting)
    .forEach((e) => e.target.classList.add('unko'));

const options: IntersectionObserverInit = {
  root: null,
  rootMargin: '0px',
  threshold: 0,
};

const e = document.querySelector('#piyo');

const observer = new IntersectionObserver(c, options);
observer.observe(e as Element);