height: 0と0%の違い

ボタン操作でメニュー開閉を行うコードを作成しました。
メニューが閉じている時には要素の高さを0にしたく、height: 0%
をしたところ高さが0にはなりませんでした。

結果的にheight: 0と指定したところ上手くいきました。

height: 0%にして何故できないのか分かりません。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css" />
9  </head>
10  <body>
11    <button>OPEN</button>
12    <nav class="nav">
13      <ul class="nav__main">
14        <li class="nav__list"><a href="#" class="nav__link">メニュー1</a></li>
15        <li class="nav__list"><a href="#" class="nav__link">メニュー2</a></li>
16        <li class="nav__list"><a href="#" class="nav__link">メニュー3</a></li>
17        <li class="nav__list"><a href="#" class="nav__link">メニュー4</a></li>
18        <li class="nav__list"><a href="#" class="nav__link">メニュー5</a></li>
19        <li class="nav__list"><a href="#" class="nav__link">メニュー6</a></li>
20      </ul>
21    </nav>
22    <main></main>
23    <script src="main.js"></script>
24  </body>
25</html>

css
1* {
2  box-sizing: border-box;
3}
4
5ul {
6  list-style: none;
7  padding: 0;
8  margin: 0;
9}
10
11a {
12  color: black;
13  text-decoration: none;
14}
15
16button {
17  cursor: pointer;
18  padding: 10px;
19}
20
21// ナビゲーション
22
23.nav {
24  //   height: 0%にすると高さが0にならない;
25  height: 0;
26  opacity: 0;
27  overflow: hidden;
28}
29
30.nav.open {
31  animation-name: fade-in;
32  animation-duration: 1s;
33  animation-fill-mode: forwards;
34}
35@keyframes fade-in {
36  0% {
37    height: 0;
38    opacity: 0;
39  }
40  0.1% {
41    height: auto;
42    opacity: 0;
43  }
44  100% {
45    height: auto;
46    opacity: 1;
47  }
48}
49
50.nav.close {
51  animation-name: fade-out;
52  animation-duration: 1s;
53  animation-fill-mode: forwards;
54}
55@keyframes fade-out {
56  0% {
57    height: auto;
58    opacity: 1;
59  }
60  99.9% {
61    height: auto;
62    opacity: 0;
63  }
64  100% {
65    height: 0;
66    opacity: 0;
67  }
68}
69.nav__link {
70  display: block;
71  width: 100%;
72  height: 100%;
73  padding: 20px;
74  &:hover {
75    opacity: 0.5;
76  }
77}
78
79// メイン画面
80main {
81  height: 500px;
82  background-color: lightcyan;
83}
84

js
1// 要素取得
2const btn = document.querySelector("button");
3const nav = document.querySelector(".nav");
4
5// クリックイベント
6btn.addEventListener("click", function () {
7  if (btn.textContent === "OPEN") {
8    btn.textContent = "CLOSE";
9    nav.classList.add("open");
10    nav.classList.remove("close");
11  } else if ((btn.textContent = "CLOSE")) {
12    btn.textContent = "OPEN";
13    nav.classList.add("close");
14    nav.classList.remove("open");
15  }
16});