Loading screen code won't work

Hey guys, I'm trying to put a cute loading screen on my profile but it's not working, any advice? Could it be where the gif came from that's wonky, or something else? (Credits to snoodle.doodle for the code)

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://i.postimg.cc/mDXB0W6T/peace.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

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

pointer-events: none;}

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

</style>

All help is appreciated ^_^