How can I trigger CSS animations on scroll over?

Technical Q&A
1

Good evening,

so I have implemented from: https://animate.style/ animation to my shop: peachboom.de

Everything went smoothly, but the animations are getting triggered as soon as the website load. I want the elements (images) to animate as soon as the customers scroll over them. The CSS code which I have currently on the theme.sccs file is:

.Rte .Form, .Rte .VideoWrapper, .Rte blockquote, .Rte img {
animation: fadeInLeft;
animation-duration: 3s;
}