How can I make an animation last “n” amount of seconds when scrolling down?

Question

I did this example to try to explain my problem.

I have an element of class .square and I want that when the trigger that is on the same .square