スライドアウトのアニメーションを教えてください

ハンバーガーボタンを押すと画面全体にナビゲーションが広がるデザインにする際、ナビゲーションのリストを横からスライドイン・アウトするアニメーションを作っています。

開いたときのアニメーションはできましたが、閉じるときのスライドアウトをどのように記入するのかわからないです。

.showのクラスでハンバーガーボタンがオープンになります。

html
1	<div class="navigation">
2		<nav class="nav-gb">
3			<ul>
4				<li><a href="#">HOME</a></li>
5				<li><a href="#">NEWS</a></li>
6				<li><a href="#">CONCEPT</a></li>
7				<li><a href="#">MENU</a></li>
8				<li><a href="#">SHOP</a></li>
9				<li><a href="#">ABOUT</a></li>
10			</ul>
11		</nav>
12		<div class="nav-bg"></div>
13	</div>
14

css
1.nav-gb.show ul li a {
2  position: relative;
3  z-index: 1100;
4  display: block;
5  font-size: 65px;
6  margin-bottom: 110px;
7  font-weight: 900;
8  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
9  transform: scale(0.6, 1);
10  letter-spacing: 0.2em;
11  font-family: "monospace";
12  top: 550px;
13  animation: Slidein 0.7s;
14}
15@keyframes Slidein{
16	0%{
17		opacity: 0;
18		transform: translateX(-500px) scale(0.6, 1);
19			
20	}
21	70%{ボールドテキスト
22		opacity: 1;
23		transform: translateX(120px) scale(0.6, 1);
24	}
25	100%{
26		opacity: 1;
27		transform: translateX(0) scale(0.6, 1);
28	}
29}

plasticgrammer

2021/01/05 05:29

hideクラスの適用で、slideOutのanimationとなるよう設定すれば良いと思うのですが、何がわからないのかもう少し具体的に教えていただけないでしょうか。

nf10131999

2021/01/06 02:37

解決しました。すいませんでした。

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

回答1件

ベストアンサー

こういう場合は、animation より transition の方が楽に実装できると思います。

css
1.nav-gb ul li {
2  font-size: 65px;
3  opacity: 0;
4  transform: translateX(-500px) scale(0.6, 1);
5  transition: .7s cubic-bezier(0.67, -0.94, 0.58, 1);
6}
7
8.nav-gb.open ul li {
9  opacity: 1;
10  transform: translateX(0) scale(0.6, 1);
11  transition: .7s cubic-bezier(0.25, 0.1, 0.31, 1.96);
12}