CSSで画像が切り替わるアニメーションの時に、重なったヘッダーも連動して消えてしまう

htmlとCSSのみで、メイン画像がゆっくり消えて別の画像に切り替わる処理をしましたが、なぜかメイン画像と重なったヘッダー部分もメイン画像のアニメーションと連動して薄くなったり消えたり濃くなったりしてしまいます。
ヘッダー部分は変化しないようにしたいです。
解決方法はありますでしょうか。
よろしくお願いいたします。

【HTML】

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>top page</title>

</head>
<body>
<header>
    <h2><a class="name" href="#">サンプル</a></h2><a href="#"><img src="img/logo.jpg"></a>
<div class="header-link">
  <a href="#">concept<br>(初めての方へ）</a>
  <a href="consulting menu.html">consulting menu</a>
  <a href="#">company</a>
  <a href="#">contact</a> 
</div>
    </header>
<main>
    <div class="slideBox">
        <h1 class="title">サンプル</h1>
        <div class="item2" style="background-image: url(./img/main-visual1.jpg)"></div>
        <div class="item2" style="background-image: url(./img/main-visual2.jpg)"></div>
        <div class="item2" style="background-image: url(./img/sample.jpg)"></div>
      </div>

【CSS】
{
padding:0;
margin:0;
}
a:hover{
opacity:0.7;
}
header h2{
padding-left:50px;
font-family:"Modern";

}
.name{
display:inline-block;
width:350px;
color:whitesmoke;
}
header img{
width:20%;
}
header{
background-color:#1e0049;
position:fixed;
top:0;
left:0;
width:100%;
z-index:10;
display:flex;
justify-content:space-between;
padding:30px 0 10px 0;
font-family:Century Gothic;

}
.header-link{
display:flex;
justify-content:space-around;
text-align:center;
}
.header-link a{
width:200px;
color:white;
}
header a{
text-decoration:none;

}

.slideBox {
height: 800px;
overflow: hidden;
position: relative;
}

/* テキストがあるバージョン */
.title {
font-size: 32px;
color: #fff;
z-index: 11;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.item2 {
z-index: 10;
opacity: 0;
width: 100%;
height: 800px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 30s 0s infinite;
animation: anime 30s 0s infinite;
}

.item2:nth-of-type(2) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}

.item2:nth-of-type(3) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}

/* ふわっとアニメーション */
@keyframes anime {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
35% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 9;
}
100% {
opacity: 0;
}
}