Preview
const hamburgers = document.querySelectorAll(".js-hb");
hamburgers.forEach(hb => {
hb.addEventListener("click", () => {
hb.classList.toggle("active");
});
});
.hb {
width: 38px;
height: 26px;
position: relative;
margin: auto;
cursor: pointer;
transition: 0.3s;
}
.hb span {
position: absolute;
width: 100%;
height: 4px;
background: white;
border-radius: 20px;
transition: 0.35s cubic-bezier(.68,-0.55,.27,1.55);
left: 0;
}
.hb span:nth-child(1) { top: 0; }
.hb span:nth-child(2) { top: 11px; }
.hb span:nth-child(3) { bottom: 0; }"
<div class="hb dot js-hb"> <span></span> <span></span> <span></span> </div>
.dot.active span { width: 6px; left: 16px; border-radius: 50%; }
.dot.active span:nth-child(2) { opacity: 0; }
.dot.active span:nth-child(1),
.dot.active span:nth-child(3) { width: 30px; left: 4px; }
.dot.active span:nth-child(1) { transform: rotate(45deg); top: 11px; }
.dot.active span:nth-child(3) { transform: rotate(-45deg); bottom: 11px; }
<div class="hb split js-hb"> <span></span><span></span><span></span> </div>
.split span { width: 50%; }
.split span:nth-child(1){left:0;}
.split span:nth-child(2){left:25%;}
.split span:nth-child(3){left:50%;}
.split.active span:nth-child(1){left:25%;transform:rotate(45deg);top:11px;}
.split.active span:nth-child(2){opacity:0;}
.split.active span:nth-child(3){left:25%;transform:rotate(-45deg);bottom:11px;}
<div class="hb bounce js-hb">...</div>
.bounce.active{transform:scale(1.2);}
.bounce.active span:nth-child(2){transform:scaleX(0.2);}
.bounce.active span:nth-child(1),
.bounce.active span:nth-child(3){transform:rotate(45deg);top:11px;}
<div class="hb elastic js-hb">...</div>
.elastic span{width:70%;}
.elastic span:nth-child(2){width:100%;}
.elastic.active span{width:100%;}
.elastic.active span:nth-child(1){transform:rotate(45deg);top:11px;}
.elastic.active span:nth-child(3){transform:rotate(-45deg);bottom:11px;}
<div class="hb spin js-hb">...</div>
.spin.active{transform:rotate(360deg);}
.spin.active span:nth-child(2){opacity:0;}
.spin.active span:nth-child(1){transform:rotate(45deg);top:11px;}
.spin.active span:nth-child(3){transform:rotate(-45deg);bottom:11px;}
<div class="hb back js-hb">...</div>
.back.active span:nth-child(1){transform:rotate(-45deg);top:11px;width:70%;}
.back.active span:nth-child(2){opacity:0;}
.back.active span:nth-child(3){transform:rotate(45deg);bottom:11px;width:70%;}
<div class="hb kebab js-hb">...</div>
.kebab.active span{width:6px;height:6px;border-radius:50%;left:16px;}
.kebab.active span:nth-child(1){top:0;}
.kebab.active span:nth-child(2){top:10px;}
.kebab.active span:nth-child(3){top:20px;}