Edit in JSFiddle

// IntersectionObserver 를 등록한다.
const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
  	// 관찰 대상이 viewport 안에 들어온 경우 'tada' 클래스를 추가
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('tada');
    }
    // 그 외의 경우 'tada' 클래스 제거
    else {
      entry.target.classList.remove('tada');
    }
  })
})

// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다.
const boxElList = document.querySelectorAll('.box');
boxElList.forEach((el) => {
  io.observe(el);
})
<div class="example">
  <h1 class="title">Scroll Down <span class="arrow">👇</span></h1>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.example {
  padding-top: 800px;
  padding-bottom: 300px;
  width: 100%;
  background: #eee;
  position: relative;
}

.title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  display: inline-block;
  animation: bounce 1s infinite ease;
}

.box {
  margin: 0 auto 200px auto;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: #7de2fc linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
}

.box.tada {
  animation: tada 1s ease;
}