CSS Keyframe Animation on reveal

Hello,

I made a grid of the latest posts with the Stackable plugin and I added a keyframed animation with the CSS below. The animation works perfect when the page is loaded but I can’t figure out how to make the animation start when the grid is appearing in the viewport. I tried different javascript solutions but somehow it never works for me in wordpress.

Any help would be awesome
thanks

.ugb-blog-posts__item {
	animation: fadein 1s ease-out normal backwards;
}
.ugb-blog-posts__item:nth-child(1) {	 animation-delay: 0; }
.ugb-blog-posts__item:nth-child(2) {	 animation-delay: 200ms; }
.ugb-blog-posts__item:nth-child(3) {	 animation-delay: 400ms; }
.ugb-blog-posts__item:nth-child(4) {	 animation-delay: 600ms; }
.ugb-blog-posts__item:nth-child(5) {	 animation-delay: 800ms; }
.ugb-blog-posts__item:nth-child(6) {	 animation-delay: 1000ms; }
.ugb-blog-posts__item:nth-child(7) {	 animation-delay: 1200ms; }
.ugb-blog-posts__item:nth-child(8) {	 animation-delay: 1400ms; }
.ugb-blog-posts__item:nth-child(9) {	 animation-delay: 1600ms; }
.ugb-blog-posts__item:nth-child(10) {	 animation-delay: 1800ms; }
.ugb-blog-posts__item:nth-child(11) {	 animation-delay: 2000ms; }
.ugb-blog-posts__item:nth-child(12) {	 animation-delay: 2200ms; }

@keyframes fadein {
		0%  	{transform:scale(0);}
		80%  	{transform:scale(1.05);}
		100% 	{transform:scale(1);}
}