CodePen Embed - Animated menu icon 180 degrees

<span id="menu_btn" role="button" tabIndex="0" onClick="changeMode()" onKeyDown="changeMode()">
  <div class="menu_btn_icon"></div>
</span>

:root {
  --header: #4a4e69;
  --background: #f4f3f2;
  --page-color-transition: background .2s ease, color .2s ease;
}

body {
  background: var(--background);
}

#menu_btn {
  padding: 0.3em 0.5em;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(3);
}
.menu_btn_icon {
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--header);
  transition: transform 0.75s ease-out, var(--page-color-transition);
}

.menu_btn_icon::before,
.menu_btn_icon::after {
  position: absolute;
  content: '';
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--header);
  transition: transform 0.5s ease-out, var(--page-color-transition);
}

.sidebar-hidden .menu_btn_icon {
  transform: rotate(180deg);
}

.sidebar-hidden .menu_btn_icon::before {
  transform: translateY(-8px) rotate(180deg);
}

.sidebar-hidden .menu_btn_icon::after {
  transform: translateY(8px) rotate(180deg);
}

let body = document.querySelector("body");

body.classList.add("sidebar-hidden");

function changeMode() {
  body.classList.toggle("sidebar-hidden");
}

This Pen is owned by Mary Knize on CodePen.

See more by @captainpainway on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.