Как запустить анимацию?
использую класс 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>