Как сделать так, чтобы анимация css проигрывалась только после скролла на этот блок?

Question

[chill boy]

Есть анимация

@keyframes rev-img {
0% {
width: 0%;
}

50% {
width: 7%;
}

100% {
width: 17%;
}
}

Нужно, чтобы она запускалась не сразу после загрузки, а только, когда объект, попадает в поле зрения, ну когда пользователь скроллит до блока, где должна быть анимация. Возможно ли это сделать с помощью какого нибудь скрипта в javascpript?

Answer 1

[Михаил Шведков]

Вполне возможно.
1. Слушатель на скролл корневого документа
2. Внутри слушателя - проверка высоты скролла, сравнение ее с позицией блока. Если мы проскроллили больше, чем высота блока, то блок видимый (на экране)
3. Когда блок стал видимым, добавляем ему класс, на который завязана анимация
4. При необходимости, когда блок уходит за границы экрана, класс можно убрать, чтоб анимация повторялась

Answer 2

[hzzzzl]

сейчас еще такая прикольная штука есть
https://developer.mozilla.org/ru/docs/Web/API/Inte...
несложно заскриптовать, разница в том, что не надо слушать каждый скролл, а браузер всё сделает когда надо сам

Answer 3

[FoxSparky]

Все просто. Есть замечательная js-библиотека Wow.js
https://wowjs.uk
С ней вашу задачу очень просто решить)