ハンバーガーメニューのｸﾘｯｸ時のアニメーションがｸﾘｯｸ後に戻ってしまう

前提・実現したいこと

プログラミング初心者です
お手柔らかにお願いします

モバイル用の画面でのハンバーガーメニューをつけたのですがクリック時に
ハンバーガーメニューの3本のうち中央が右へフェイドアウトしつつ上下の2本がクロスして✖印になるアニメーションをつけたいです。またもう一度クリックすれば元の状態に戻るようにしたいです。

発生している問題・エラーメッセージ

ｸﾘｯｸしている間はアニメーションで変化するのですが、マウスから指を離すとｸﾘｯｸ前の状態に戻ってしまいます

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">  
5  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6  <title>MyPortfolio</title>
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
9  <link rel="stylesheet" href="MyPortfolio.css">
10</head>
11<body>
12  <!-- ヘッダー -->
13  <header>
14    <nav class="navbar navbar-expand-md  navbar-light">
15      <div class="container-fluid">      
16          <a href="#" class="navbar-brand">MY PORTFOLIO</a>
17          <button class="navbar-toggler" data-toggle="collapse"  type="button" data-target="#menu">
18            <a class="menu-trigger" href="#">
19              <span></span>
20              <span></span>
21              <span></span>
22            </a>
23          </button>
24          <div class="collapse navbar-collapse" id="menu">
25            <ul class="navbar-nav ml-auto " >
26              <li class="nav-item"><a href="#profile" class="nav-link">Profile</a></li>
27              <li class="nav-item"><a href="#service" class="nav-link">Service</a></li>
28              <li class="nav-item"><a href="#works" class="nav-link">Works</a></li>
29              <li class="nav-item"><a href="#policy" class="nav-link">Policy</a></li>
30              <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
31            </ul>
32          </div>      
33      </div>
34    </nav>
35  </header>
36
37
38  <!-- ランディングページ -->
39
40
41  <!-- プロフィール -->
42
43
44  <!-- サービス内容 -->
45
46
47  <!-- works (制作物) -->
48
49
50  <!-- ポリシー -->
51
52
53  <!-- お問い合わせ -->
54
55
56  <!-- フッター -->
57
58
59  <!-- bootstrap JQuery -->
60  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
61<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
62<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
63</body>
64</html>

CSS
1*{
2  box-sizing: border-box;
3  list-style: none;
4}
5
6/* ヘッダー */
7.navbar-light .navbar-toggler {
8  border-color: rgba(0, 0, 0, 0);
9}
10*:focus {
11  outline: none !important;
12}
13.menu-trigger,
14.menu-trigger span {
15  display: inline-block;
16  transition: all .4s;
17  box-sizing: border-box;
18}
19.menu-trigger {
20  position: relative;
21  width: 30px;
22  height: 25px;
23}
24.menu-trigger span {
25  position: absolute;
26  left: 0;
27  width: 100%;
28  height: 2px;
29  background-color: black;
30  border-radius: 4px;
31}
32.menu-trigger span:nth-of-type(1) {
33  top: 0;
34}
35.menu-trigger span:nth-of-type(2) {
36  top: 12.5px;
37}
38.menu-trigger span:nth-of-type(3) {
39  bottom: 0;
40}
41
42button:active span:nth-of-type(1) {
43  -webkit-transform: translateY(0px) rotate(-45deg)!important;
44  transform: translateY(14px) rotate(-45deg)!important;
45}
46button:active span:nth-of-type(2) {
47  left: 200%;
48  opacity: 0;
49  -webkit-transform: translateY(10px);
50  transform: translateY(10px);
51  -webkit-animation: active-menu-bar02 .8s forwards;
52  animation: active-menu-bar02 .8s forwards;
53}
54@-webkit-keyframes active-menu-bar02 {
55  100% {
56    height: 0!important;
57  }
58}
59@keyframes active-menu-bar02 {
60  100% {
61    height: 0!important;
62  }
63}
64button:active span:nth-of-type(3) {
65  -webkit-transform: translateY(-0px) rotate(45deg);
66  transform: translateY(-8px) rotate(45deg);
67}