Trouble with CSS Animations

I am working on a site that has three inline videos that I put into circles and I want them to play when the user scrolls to that section of the page so they see the first start of the video. I think CSS animations can do this but I am not very familiar with creating CSS animations nor how to call the video’s I have to start/stop on scroll.
I am wondering if someone can point me to a way to learn or step by step how I can do this?