アニメーションでの表示・非表示がうまくいかない

お世話になっております。

ナビゲーションメニューの表示・非表示にアニメーションを使いたいのですが、

非表示から表示の際には希望どおりいくのに対し、
表示から非表示の動きの時、一瞬消えてからアニメーションに入る挙動になるため。
表示が少しちかちかして見えてしまいます。

これは、非表示にするアニメーションに入る前に、一瞬元の指定（opacity: 0;）が表示されるためかな？
と思い、.header_menulistの内容を変えてみたのですが、
余計にがたついてしまい、思うような挙動になりません。

どうすれば、表示・非表示時の両方とも滑らかな挙動になるのでしょうか。

よろしくお願いいたします。

HTML
1<body>
2
3  <div class="header">
4
5    <input class="nav_bar" type="checkbox" id="nav_bar">
6    <label for="nav_bar" class="header_button">
7      <span></span><span></span><span></span>
8    </label>
9    <div class="header_menu">
10      <a href="#concept" class="header_menulist"><span class=""></span>
11        <p>当店ついて</p>
12      </a>
13      <a href="#menu" class="header_menulist"><span class=""></span>
14        <p>メニュー</p>
15      </a>
16      <a href="#floor" class="header_menulist"><span class=""></span>
17        <p>店内のご案内</p>
18      </a>
19      <a href="#access" class="header_menulist"><span class=""></span>
20        <p>場所</p>
21      </a>
22      <a href="#contact" class="header_menulist"><span class=""></span>
23        <p>問い合わせ</p>
24      </a>
25    </div>
26  </div>
27
28  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
29</body>

css
1.header {
2  width: 100%;
3  height: auto;
4  position: fixed;
5  top: 30px;
6  left: 30px;
7  z-index: 100;
8}
9
10/***
11 　メニューの表示・非表示
12*******/
13
14.header_menu {
15  width: 260px;
16  height: 125px;
17  position: absolute;
18  top: 0;
19  left: 50px;
20}
21.header_menulist {
22  width: 24px;
23  writing-mode: vertical-rl;
24  background: rgba(243, 239, 231, 0.75);
25  position: absolute;
26  top: -25px;
27  opacity: 0;
28}
29
30input.nav_bar:checked ~ .header_menu > a:nth-child(5) {
31  animation: menu_on 0.3s ease-in-out 0s forwards;
32}
33
34input.nav_bar:checked ~ .header_menu > a:nth-child(4) {
35  animation: menu_on 0.3s ease-in-out 0.05s forwards;
36}
37
38input.nav_bar:checked ~ .header_menu > a:nth-child(3) {
39  animation: menu_on 0.3s ease-in-out 0.1s forwards;
40}
41
42input.nav_bar:checked ~ .header_menu > a:nth-child(2) {
43  animation: menu_on 0.3s ease-in-out 0.15s forwards;
44}
45
46input.nav_bar:checked ~ .header_menu > a:nth-child(1) {
47  animation: menu_on 0.3s ease-in-out 0.2s forwards;
48}
49
50@keyframes menu_on {
51  0% {
52    top: -25px;
53    opacity: 0;
54  }
55  100% {
56    top: 0;
57    opacity: 1;
58  }
59}
60
61input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(1) {
62  animation: menu_off 0.3s ease-in-out 0s forwards;
63}
64input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(2) {
65  animation: menu_off 0.3s ease-in-out 0.05s forwards;
66}
67input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(3) {
68  animation: menu_off 0.3s ease-in-out 0.1s forwards;
69}
70input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(4) {
71  animation: menu_off 0.3s ease-in-out 0.15s forwards;
72}
73input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(5) {
74  animation: menu_off 0.3s ease-in-out 0.2s forwards;
75}
76
77@keyframes menu_off {
78  0% {
79    top: 0;
80    opacity: 1;
81  }
82  100% {
83    top: -25px;
84    opacity: 0;
85  }
86}
87
88/***
89  メニューリストの体裁
90*******/
91.header_menu > a:nth-child(1) {
92  left: 156px;
93  height: 125px;
94}
95.header_menu > a:nth-child(2) {
96  left: 117px;
97  height: 90px;
98}
99.header_menu > a:nth-child(3) {
100  left: 78px;
101  height: 125px;
102}
103.header_menu > a:nth-child(4) {
104  left: 39px;
105  height: 90px;
106}
107.header_menu > a:nth-child(5) {
108  left: 0px;
109  height: 105px;
110}
111.header_menulist p {
112  font-size: 16px;
113  line-height: 1;
114  letter-spacing: 3px;
115  color: #07223d;
116  position: absolute;
117  top: 6px;
118  left: 4px;
119  font-feature-settings: normal;
120}
121p {
122  margin: o;
123}
124
125/***
126  ナビゲーションボタン
127*******/
128.header_button {
129  display: inline-block;
130  width: 40px;
131  height: 20px;
132  position: absolute;
133  top: 0;
134  left: 0;
135  overflow: hidden;
136}
137
138.header_button span {
139  display: block;
140  width: 100%;
141  height: 1px;
142  background: #333;
143  position: absolute;
144  left: 0;
145  transition: 0.25s;
146}
147.header_button > span:nth-child(1) {
148  top: 0;
149}
150.header_button > span:nth-child(2) {
151  top: 50%;
152}
153.header_button > span:nth-child(3) {
154  bottom: 0;
155}
156
157@keyframes header_button {
158  0% {
159    left: -100%;
160    opacity: 0;
161  }
162  15% {
163    left: 0;
164    opacity: 1;
165  }
166  85% {
167    left: 0;
168    opacity: 1;
169  }
170  100% {
171    left: 100%;
172    opacity: 0;
173  }
174}
175
176input.nav_bar:checked + .header_button span:nth-child(1) {
177  transform: translateY(12px) translateX(-12px) rotate(-45deg);
178}
179input.nav_bar:checked + .header_button span:nth-child(2) {
180  background: transparent;
181}
182input.nav_bar:checked + .header_button span:nth-child(3) {
183  transform: translateY(-15px) translateX(-12px) rotate(45deg);
184}
185

行動規範の内容に同意します

回答1件

ベストアンサー

menu_off の animation-fill-mode を forwards から backwards に変更すればどうでしょう。

css
1input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(1) {
2  animation: menu_off 0.3s ease-in-out 0s backwards;
3}
4input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(2) {
5  animation: menu_off 0.3s ease-in-out 0.05s backwards;
6}
7input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(3) {
8  animation: menu_off 0.3s ease-in-out 0.1s backwards;
9}
10input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(4) {
11  animation: menu_off 0.3s ease-in-out 0.15s backwards;
12}
13input.nav_bar:not(:checked) ~ .header_menu > a:nth-child(5) {
14  animation: menu_off 0.3s ease-in-out 0.2s backwards;
15}

蛇足

transitionでも同様のことは可能です。

css
1input.nav_bar ~ .header_menu > a {
2    top: -25px;
3    opacity: 0;
4}
5
6input.nav_bar:checked ~ .header_menu > a {
7    top: 0;
8    opacity: 1;
9}
10
11input.nav_bar ~ .header_menu > a:nth-child(1) {
12  transition: all 0.3s ease-in-out 0s;
13}
14input.nav_bar ~ .header_menu > a:nth-child(2) {
15  transition: all 0.3s ease-in-out 0.05s;
16}
17input.nav_bar ~ .header_menu > a:nth-child(3) {
18  transition: all 0.3s ease-in-out 0.1s;
19}
20input.nav_bar ~ .header_menu > a:nth-child(4) {
21  transition: all 0.3s ease-in-out 0.15s;
22}
23input.nav_bar ~ .header_menu > a:nth-child(5) {
24  transition: all 0.3s ease-in-out 0.2s;
25}
26
27input.nav_bar:checked ~ .header_menu > a:nth-child(5) {
28  transition: all 0.3s ease-in-out 0s;
29}
30input.nav_bar:checked ~ .header_menu > a:nth-child(4) {
31  transition: all 0.3s ease-in-out 0.05s;
32}
33input.nav_bar:checked ~ .header_menu > a:nth-child(3) {
34  transition: all 0.3s ease-in-out 0.1s;
35}
36input.nav_bar:checked ~ .header_menu > a:nth-child(2) {
37  transition: all 0.3s ease-in-out 0.15s;
38}
39input.nav_bar:checked ~ .header_menu > a:nth-child(1) {
40  transition: all 0.3s ease-in-out 0.2s;
41}