JavaScriptでハンバーガーメニューのアニメーションが×から始まってしまう

実現したいこと

ハンバーガーメニューをクリックすると3本の横線が×になる
動きを付けたい

発生している問題

クリックする前にactiveが付与され最初から×でクリックすると横３本になる。 アニメーションは思い通りだが動作が逆。

該当のソースコード

###html----------------------------------------------------------------------------

<header id="top" class="header" > <nav class="nav_burger nav" id="nav_burger"> <ul> <li><a href="#demo">demo</a></li> <li><a href="#bdemo">demo</a></li> <li><a href="#demo">demo</a></li> <li><a href="#demt"></a>demo</a></li> <li><a href="#demo">demo</a></li> </ul> </nav> <button class="burger active" id="burger"> <span></span> <span></span> <span></span> </button> <ul> <li><a href="#demo">demo</a></li> <li><a href="#demo">demo</a></li> <li><a href="#demo">demo</a></li> <li><a href="#demo">demo</a></li> </ul> </header>

###css---------------------------------------------------------------------------------------------------

body {
position: relative;

color: #FFF; /* RGB */ background-color: #000; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 400; font-style: normal; line-height: 2.4rem; text-align: center; margin: 0; overflow-x: hidden;

}

ul li {
list-style: none;
}

a {
text-decoration: none;
color: #FFFFFF;
}

h2 {
font-size: 24px;
}

.header {
position: fixed;
width: 100%;
height: 55px;
background-color: #000;
z-index: 100;
}

.header ul {
display: none;
}

/humberger_background/

.nav_burger {
display: block;
position: fixed;
top: 0;
left: 0;
transform: translateX(100%);
background-color: #000;
height: 100%;
width: 100%;
transition: ease .4s;
/ハンバーガーメニュークリック時のナビゲーションメニュー出現を遅延/
}

.nav_burger ul {
display: block;
padding: 10% 0 0 0;
text-align: left;
font-size: 2rem;
font-weight: 600;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #fff;
}

.nav_burger ul li {
padding: 6% 0 6% 12%;
font-size: 2rem;
font-weight: 600;
border-bottom: solid 4px #ffbf00;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.nav_burger ul li a {
color: #fff;
}

.burger {
display: block;
position: fixed;
background-color: #000;
height: 55px;
aspect-ratio: 1;
top: 0;
right: 0;
border: none;
cursor: pointer;
rotate: 0;
}

.burger span {
display: block;
position: relative;
height: 1px;
width: 100%;
background-color: #fff;
transition: ease .4s;

/*ハンバーガーメニュークリック時の三本線の動きを遅延*/

}

.burger span:nth-child(1) {
top: 0;
}

.burger span:nth-child(2) {
margin: 8px 0;
}

.burger span:nth-child(3) {
top: 0;
}

.nav_burger.active {
transform: translateX(0);
}

.burger.active span:nth-child(1) {
top: 10px;
transform: rotate(45deg);
}

.burger.active span:nth-child(2) {
opacity: 0;
}

.burger.active span:nth-child(3) {
top: -8px;
transform: rotate(-45deg);
}

@media (min-width:768px) {

.header { height: 64px; } .header ul { display: flex; font-size: 1.2rem; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; position: absolute; width: 40%; justify-content: space-between; align-items: center; right: 28%; top: -5px; } .burger { display: none; } .nav_burger { display: none; }

}

###JavaScript--------------------------------------------------------------------------------------------

if (burger) {
burger.addEventListener('click', () => { //ハンバーガーメニューをクリックしたら
burger.classList.toggle('active'); // ハンバーガーメニューにactiveクラスを付け外し
nav.classList.toggle('active'); // ナビゲーションメニューにactiveクラスを付け外し
})
}

### 試したこと burger.addEventListener('click', function () { //ハンバーガーメニューをクリックしたら burger.classList.toggle('active'); // ハンバーガーメニューにactiveクラスを付け外し nav.classList.toggle('active'); // ナビゲーションメニューにactiveクラスを付け外し }); これでも治らず ### 補足情報（FW/ツールのバージョンなど） VisualStudioCode