【CSS】ハンバーガーメニューのアニメーション

参考元

menu.html

<link href="css/style.css" rel="stylesheet" type="text/css">
<div class="burger_menu mb">
  <p>menu</p>
  <input type="checkbox" id="menu37">
  <label for="menu37">
    <div></div>
    <div></div>
    <div></div>
  </label>
</div>

style.css

#menu37{
  display: none;
}

.burger_menu label {
  position: relative;
  width: 50px;
  height: 40px;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-align: left;
}

.burger_menu div,
.burger_menu div:before,
.burger_menu div:after {
  background: #000;
  position: absolute;
  height: 5px;
  width: 44px;
  left: 3px;
  border-radius: 4px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.burger_menu label div:first-child {
  top: 7px;
}
.burger_menu label div:nth-child(2) {
  top: 17px;
}
.burger_menu label div:nth-child(3) {
  top: 27px;
}

#menu37 + label div {
  -webkit-transition: top .15s .17s, -webkit-transform .12s .033s;
  transition: top .15s .17s, -webkit-transform .12s .033s;
  transition: top .15s .17s, transform .12s .033s;
  transition: top .15s .17s, transform .12s .033s, -webkit-transform .12s .033s;
}
#menu37 + label div:nth-child(3) {
  -webkit-transition: top .15s .17s, -webkit-transform .17s;
  transition: top .15s .17s, -webkit-transform .17s;
  transition: top .15s .17s, transform .17s;
  transition: top .15s .17s, transform .17s, -webkit-transform .17s;
}

#menu37:checked + label div {
  top: 17px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transition: top .1s, -webkit-transform .12s .1s;
  transition: top .1s, -webkit-transform .12s .1s;
  transition: top .1s, transform .12s .1s;
  transition: top .1s, transform .12s .1s, -webkit-transform .12s .1s;
}
#menu37:checked + label div:nth-child(3) {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
  -webkit-transition: top .1s, -webkit-transform .17s .1s;
  transition: top .1s, -webkit-transform .17s .1s;
  transition: top .1s, transform .17s .1s;
  transition: top .1s, transform .17s .1s, -webkit-transform .17s .1s;
}