CSS "Opacity" for a website element

Hello everybody. I’m a CSS novice, and I’m trying to make some changes (He doesn’t know HTML and CSS at all, but this is (https://www.worktime.com) on my friend’s website. So I’m trying to make some adjustments to a video stuck in the middle of the index page. I want to make it smoothly glide to the bottom of the screen. One more thing, while it becomes transparent at the bottom, and it is visible in the middle, users can click on it. I hope that’s clear, hahaha. So I think I can try to make it transparent using OPACITY here, but how can I make it transparent while it moves? Perhaps setting moving time to, for example, 1.0s) and setting the element’s time dependency on animation and transparency should help?

Here is my public share link: LINK
(how to access public share link)