Как запустить анимацию?

использую класс animation

 function animateBlock(entries, observer) {
   const $this = $(entries[0].target)
   if (entries[0].isIntersecting) {
     $this.addClass('animation');
   }
 }

 var options = {
   rootMargin: '0px',
   threshold: .2
 }

 let elem = document.querySelector('.block');
 var elemObserver = new IntersectionObserver(animateBlock, options);
 elemObserver.observe(elem);
.block {
  transform: translateX(-100%);
  outline: 1px solid red;
  animation: view 0s linear forwards;
  animation-delay: 0.3s;
}

.block.animation {
   animation: view 0.3s linear forwards;
}

@keyframes view {
  100% {
    transform: translateX(0);
  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

<section class="block">
  <div class="container">
    <div class="item">
    <h3>block 1 который анимируем</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id unde illum optio eveniet voluptates! Ullam quasi deserunt nemo id iure laboriosam distinctio, alias maxime expedita. Ut aperiam autem, hic explicabo.</p>
    </div>
  </div>
</section>

<section class="block">
  <div class="container">
    <div class="item">
    <h3>block 2 который анимируем</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id unde illum optio eveniet voluptates! Ullam quasi deserunt nemo id iure laboriosam distinctio, alias maxime expedita. Ut aperiam autem, hic explicabo.</p>
    </div>
  </div>
</section>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>


Ответы (0 шт):