MaxAntony/animated burger button

## animated burger button
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hero image</title>
    <style>
      body {
        background: rgb(43, 56, 77);
      }
      .main-container {
        width: 200px;
        margin: 100px auto;
      }

      #hamburger button {
        background: none;
        border: 0px;
        cursor: pointer;
        padding: 0;
        width: 60px;
        height: 60px;
      }

      #hamburger button span {
        border-radius: 5px;
        background: white;
        display: block;
        width: 60%;
        margin: 5px auto;
        height: 2px;
        animation-duration: 1s;
        animation-fill-mode: forwards;
      }
      #hamburger button.open .top-line {
        animation-name: top-line-animation;
      }
      #hamburger button.open .middle-line {
        animation-name: middle-line-animation;
      }
      #hamburger button.open .bottom-line {
        animation-name: bottom-line-animation;
      }

      #hamburger button .top-line {
        animation-name: top-line-animation-close;
      }
      #hamburger button .middle-line {
        animation-name: middle-line-animation-close;
      }
      #hamburger button .bottom-line {
        animation-name: bottom-line-animation-close;
      }

      @keyframes top-line-animation {
        50%,
        100% {
          margin: 0 auto;
          transform: translateY(2px) rotate(-45deg);
        }
      }
      @keyframes middle-line-animation {
        20%,
        100% {
          margin: 0 auto;
          width: 0;
          opacity: 0;
        }
      }
      @keyframes bottom-line-animation {
        50%,
        100% {
          margin: 0 auto;
          transform: translateY(-2px) rotate(45deg);
        }
      }
      /* close */

      @keyframes top-line-animation-close {
        0% {
          margin: 0 auto;
          transform: translateY(2px) rotate(-45deg);
        }
        50%,
        100% {
          margin: 5px auto;
          transform: translateY(0px) rotate(0deg);
        }
      }
      @keyframes middle-line-animation-close {
        0% {
          margin: 0 auto;
          width: 0;
          opacity: 0;
        }
        20%,
        100% {
          margin: 0 auto;
          width: 60%;
          opacity: 1;
        }
      }
      @keyframes bottom-line-animation-close {
        0% {
          margin: 0 auto;
          transform: translateY(-2px) rotate(45deg);
        }
        50%,
        100% {
          margin: 5px auto;
          transform: translateY(0px) rotate(0deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="main-container">
      <div id="hamburger">
        <button>
          <span class="top-line"></span>
          <span class="middle-line"></span>
          <span class="bottom-line"></span>
        </button>
      </div>
    </div>

    <script>
      const nav = document.querySelector("#hamburger button");
      nav.addEventListener("click", (e) => nav.classList.toggle("open"));
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Hero image</title>
	<style>
	body {
	background: rgb(43, 56, 77);
	}
	.main-container {
	width: 200px;
	margin: 100px auto;
	}

	#hamburger button {
	background: none;
	border: 0px;
	cursor: pointer;
	padding: 0;
	width: 60px;
	height: 60px;
	}

	#hamburger button span {
	border-radius: 5px;
	background: white;
	display: block;
	width: 60%;
	margin: 5px auto;
	height: 2px;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	}
	#hamburger button.open .top-line {
	animation-name: top-line-animation;
	}
	#hamburger button.open .middle-line {
	animation-name: middle-line-animation;
	}
	#hamburger button.open .bottom-line {
	animation-name: bottom-line-animation;
	}

	#hamburger button .top-line {
	animation-name: top-line-animation-close;
	}
	#hamburger button .middle-line {
	animation-name: middle-line-animation-close;
	}
	#hamburger button .bottom-line {
	animation-name: bottom-line-animation-close;
	}

	@keyframes top-line-animation {
	50%,
	100% {
	margin: 0 auto;
	transform: translateY(2px) rotate(-45deg);
	}
	}
	@keyframes middle-line-animation {
	20%,
	100% {
	margin: 0 auto;
	width: 0;
	opacity: 0;
	}
	}
	@keyframes bottom-line-animation {
	50%,
	100% {
	margin: 0 auto;
	transform: translateY(-2px) rotate(45deg);
	}
	}
	/* close */

	@keyframes top-line-animation-close {
	0% {
	margin: 0 auto;
	transform: translateY(2px) rotate(-45deg);
	}
	50%,
	100% {
	margin: 5px auto;
	transform: translateY(0px) rotate(0deg);
	}
	}
	@keyframes middle-line-animation-close {
	0% {
	margin: 0 auto;
	width: 0;
	opacity: 0;
	}
	20%,
	100% {
	margin: 0 auto;
	width: 60%;
	opacity: 1;
	}
	}
	@keyframes bottom-line-animation-close {
	0% {
	margin: 0 auto;
	transform: translateY(-2px) rotate(45deg);
	}
	50%,
	100% {
	margin: 5px auto;
	transform: translateY(0px) rotate(0deg);
	}
	}
	</style>
	</head>
	<body>
	<div class="main-container">
	<div id="hamburger">
	<button>
	<span class="top-line"></span>
	<span class="middle-line"></span>
	<span class="bottom-line"></span>
	</button>
	</div>
	</div>

	<script>
	const nav = document.querySelector("#hamburger button");
	nav.addEventListener("click", (e) => nav.classList.toggle("open"));
	</script>
	</body>
	</html>