How to make a css animation play only when scrolling on this unit?

There is an animation

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

50% {
width: 7%;

100% {
width: 17%;

Need to run immediately after loading, but only when an object enters the field of view, so when user scrolled the block where there should be animations. Is it possible to do that using some script in javascpript?
March 20th 20 at 11:30
3 answers
March 20th 20 at 11:32
It is quite possible.
1. Listener for scrolling to the root of the document
2. Inside the listener - check the height of the scroll, comparing it with the position of the block. If we prostrollo more than the height of the unit, the unit is visible (on screen)
3. When the unit became visible, add it to a class, which is tied to the animation
4. If necessary, when the unit goes outside the border of the screen class can be removed, so the animation was repeated
March 20th 20 at 11:34
now even this funny thing is
it is easy to descriptivity, the difference is that you don't have to listen to every scroll, and the browser will do when it himself
March 20th 20 at 11:36
It's simple. There is a wonderful js library Wow.js
With it, your task is very simple to solve)

Find more questions by tags CSSJavaScriptHTML