Dan Atst,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.item {
display: flex;
align-items: center;
justify-content: center;
font-family: Roboto;
font-size: 60px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
opacity: 0;
}
.item-1 {
width: 100%;
height: 100vh;
position: absolute;
background: #8b36e9;
}
.item-2 {
width: 100%;
height: 100vh;
position: absolute;
background: #444;
}
.item-3 {
width: 100%;
height: 100vh;
position: absolute;
background: #ffaa41;
}
.item-4 {
width: 100%;
height: 100vh;
position: absolute;
background: #cd9090;
}
.item-5 {
width: 100%;
height: 100vh;
position: absolute;
background: #aec5b4;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
const items = $(".item"),
length = items.length;
let n = 0,
k = opacity = 1;
(function anim() {
if (n < 0) return;
items.eq(n).animate({
opacity
}, 1000, anim);
if (n == length - 1 && opacity) {
k = -1, opacity = 0, n = length
};
n += k;
})()
});
</script>
</head>
<body>
<div class="item item-1">Блок 1</div>
<div class="item item-2">Блок 2</div>
<div class="item item-3">Блок 3</div>
<div class="item item-4">Блок 4</div>
<div class="item item-5">Блок 5</div>
</body>
</html>