html – Keyframe no css para efeito de background

Olá, tudo bem?
Eu tentei fazer uma mudança de background usando keyframe, porém as imagens quando mudam piscam na primeira vez, como se estivesse carregando. Isso é normal ou fiz algo errado?
Aqui está a página no github pages. Estou tentando fazer para celulares primeiro e depois para desktop.

https://frazaovitor.github.io/Projeto-AVIX/

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
    <title>AVIX CAMISARIA</title>
</head>
<header>
    <div class="logo">
        <h1>Desfazendo</h1>
        <img src="https://pt.stackoverflow.com/img/avixLogo.png" alt="logo avix">
        <h1> Padrões</h1>
    </div>
</header>
<body>
    <div class="carrossel"></div>
</body>

</html>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

.logo {
  display: flex;
  background-color: #000;
  color: #fff;
  font-size: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.carrossel {
  height: 92vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: background 40s infinite alternate;
}

@keyframes background {
  0% {
    background-image: url("../img/background1.jpg");
  }
  25% {
    background-image: url("../img/background2.jpg");
  }
  50% {
    background-image: url("../img/background3.jpg");
  }
  100% {
    background-image: url("../img/background4.jpg");
  }
}

Desde já, muito obrigado.