Trying to fade out a CSS transition – Blancer.com Tutorials and projects

I have this simple page transition where after clicking a button 3 images slide out and you’re taken to a different page. Everything works fine except the last image stays there for the duration I specify using setTimeout and disappears instantly once the time is up, revealing the new page. I need it to fade out instead. I tried using CSS @keyframes and it works only without the JS, for example if I set the animation-fill-mode to “forwards” and fade out of it. However I need to use JS to link to the other page after the transition. Another thing I’ve tried is using jQuery (both with and without setTimeout) but in both cases it just gets stuck on the last image and doesn’t link to the new page. Here it is (apologies, couldn’t figure out how to insert 2 separate codes).

const link = document.querySelector('.link');
const transition = document.querySelector('.transition');
link.addEventListener('click', (e) => {
 e.preventDefault();
 transition.classList.add('slide')
 $('body').fadeOut('slow', function() {
 window.location = link.href;
});
});


And here's the full original code, simplified. 

<!DOCTYPE html>
<html>
<head>
<style> 

.cover {
width: 100vw;    
height: 100vh;
position: fixed;
top: 0;
left: -100vw;
z-index: 100;
opacity: 1;
}

.transition.slide .cover1 {
background: red;
animation: slide 0.3s ease-in-out forwards;
opacity: 1;
}

.transition.slide .cover2 {
background: green;
animation: slide 0.3s ease-in-out forwards;
animation-delay: 0.3s; 
opacity: 1;
}

.transition.slide .cover3 {
background: blue;
animation: slide 0.3s ease-in-out forwards;
animation-delay: 0.6s;
opacity: 1;
}


@keyframes slide {
 from {left: -100vw; }
 to {left: 0; }
}


</style>
</head>
<body>


<div class="transition">
<div class="cover cover1"></div>
<div class="cover cover2"></div>
<div class="cover cover3"></div>
</div>

<a class="link" href="./index5.html">Contact</a>

<script>
const link = document.querySelector('.link');
const transition = document.querySelector('.transition');
link.addEventListener('click', (e) => {
 e.preventDefault();
 transition.classList.add('slide')
 setTimeout(() => {
   window.location = link.href;
 }, 3700);
});
</script> 

</body>
</html>