レスポンシブデザインの画面切り替わり時におけるアニメーションの設定

レスポンシブデザインで作成しておりますHPのメニューについて

####【設定しているメニューの状態】
・小さい画面ではメニューアイコンクリック時に上からメニューがのれんのように降りてくるアニメーションにしています。
・再度クリックすると画面上部にアニメーションで消えていきます。
・画面を大きくするとサイドバーとして常に表示しています。

####【質問】
大きい画面から小さい画面への切り替わり時に画面上部へと消えていくアニメーションからスタートしてしまいます。（添付画像）
切り替わり時のメニューの初期状態を上部で消えている状態からスタートさせるにはどのようにすればよろしいでしょうか。

html
1<header>
2    <div class="header-wrapper">
3      <img src="img/logo.png" class="header-logo" alt="ロゴ">
4      <nav class="header-nav">
5        <!-- ハンバーガーメニュー -->
6        <input id="menu" type="checkbox">
7        <label for="menu" class="open">
8          <span></span>
9          <span></span>
10          <span></span>
11        </label>
12        <label for="menu" class="back"></label>
13
14        <!-- メニューリスト -->
15        <div class="list-wrapper">
16          <ul class="menu-list">
17            <li><a href=""> > TOP</a></li>
18            <li><a href=""> > MESSAGE</a></li>
19            <li><a href=""> > GALLERY</a></li>
20            <li><a href=""> > BRAND</a></li>
21            <li><a href=""> > PROJECT</a></li>
22            <li><a href=""> > COMPANY</a></li>
23          </ul>
24          <ul class="sns-list">
25            <li><a href=""><img src="img/iconFb.png" alt=""></a></li>
26            <li><a href=""><img src="img/iconInsta.png" alt=""></a></li>
27            <li><a href=""><img src="img/iconTw.png" alt=""></a></li>
28            <li><a href=""><img src="img/iconYouTube.png" alt=""></a></li>
29          </ul>
30        </div>
31      </nav>
32    </div>
33
34    <img src="img/mainImg.jpg" class="main-img" alt="">
35  </header>

css
1/* メニューリストの初期状態を隠す */
2.list-wrapper {
3  position: fixed;
4  top: -1000px;
5  transition:0.6s ease-in; /* 画面から消えるときのアニメーション */
6  width: 100%;
7}
8
9/* メニュークリック時に表示させる */
10#menu:checked ~ .list-wrapper {
11  position: fixed;
12  top: 60px;
13  background: white;
14  width: 100%;
15  transition: 0.6s;
16  z-index: 1;
17}
18
19@media (min-width: 800px) {
20/* PC画面ではサイドバーに固定で表示 */
21.list-wrapper {
22    position: fixed;
23    top: 86px;
24    padding-left: 30px;
25    transition: none;
26  }
27}

m.ts10806

2021/01/04 22:12

Javascriptは使わない方針ですか？

shu0106

2021/01/05 03:19

はい。まだ初心者のためそこまで勉強していなく、現在はhtml,cssのみで作成したいと思っています。

m.ts10806

2021/01/05 03:44

タイミングまできちんと制御したいのでしたらJavascriptは必須です。むしろ、現在の内容が初心者には到底難しい内容という方が気になってます。現在のコードをどのように組まれたのか分からないですが、なぜこう書いたか説明できるくらいにはなっておく必要はあります。コードは書いたとおりにしか動かないので、「なんとなく動いた」「のりあえず動いてるからヨシ」は確実に事故ります。

shu0106

2021/01/05 03:47

そうなんですね。勉強を始めて2週間ですが、サイトの模写の練習にとりかかっているところでした。 javascriptはかっこよくみせるためのプラスアルファという認識でしたので後回しにしていましたが、勉強してみようと思います。ありがとうございました。