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

Question

[chill boy]

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

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

50% {
width: 7%;
}

100% {
width: 17%;
}
}

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

Answer 1

[hzzzzl]

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

Answer 2

[FoxSparky]

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