how do i make it so gif plays when someone first opens my page?? Closed

hi guys!! i was wondering what i put so that a gif plays immediately after someone opens my page and like fades out. ive seen it on other peoples pages and it looks really cool!!

<style>

body:before {

 content: " ";

 height: 100vh;

 width: 100vw;

 display: block;

 position: fixed; 

 top: 0; 

 left: 0; 

 z-index: 100;

 background-image: url('https://media.tenor.com/8hkmmE3oxmwAAAAC/gerardway-gerardthesassqueen.gif');

 background-size: cover;

 background-repeat: no-repeat;

background-position:center;

 animation: yourAnimation 3s ease 0s 1 normal forwards;

 pointer-events: none;

}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

(You can change the gif, I copypasted this)