<div class="burger-1">
<span></span>
</div>
<div class="burger-2">
<span></span>
</div>
<div class="burger-3">
<span></span>
<span></span>
<span></span>
</div>
<div class="burger-4">
<span></span>
<span></span>
<span></span>
</div>
<div class="burger-5">
<span></span>
<span></span>
<span></span>
</div>
div { margin:10px;}
.burger-1 {
position:relative;
width:44px;
height:44px;
background:white;
cursor:pointer;
.flex();
span {
display:block;
width:20px;
height:2px;
background:black;
border-radius:1px;
transition:800ms all
;
&::before,&::after {
content:'';
display:block;
width:20px;
height:2px;
border-radius:1px;
background:black;
position:relative;
transition:400ms all;
}
&::before {
top:-5px;
}
&::after {
bottom:-3px
}
}
}
.burger-1.active {
span {
transform:rotate(-315deg);
background:red;
&::before {
opacity:0;
}
&::after {
transform:rotate(90deg) translate(-25%);
background:red;
}
}
}
//
.burger-2 {
position:relative;
width:44px;
height:44px;
background:white;
cursor:pointer;
.flex();
span {
display:block;
width:20px;
height:2px;
background:black;
border-radius:1px;
transition:400ms background 0ms, 400ms transform 0ms;
&::before,&::after {
content:'';
display:block;
width:20px;
height:2px;
border-radius:1px;
background:black;
position:relative;
transition:400ms background 0ms, 400ms transform 400ms;
}
&::before {
top:-5px;
}
&::after {
bottom:-3px;
opacity:1;
transition:400ms opacity 600ms
}
}
}
.burger-2.active {
span {
background:red;
transform:rotate(135deg);
transition:400ms transform 400ms, 400ms background 400ms;
&::before {
background:red;
transform:rotate(90deg) translatex(5px);
transition: 400ms transform 0ms, 400ms background 400ms;
}
&::after {
opacity:0;
transition:400ms opacity 0ms
}
}
}
//
.burger-3 {
position:relative;
width:44px;
height:44px;
background:white;
cursor:pointer;
.flex();
flex-direction:column;
span {
display:block;
width:20px;
height:2px;
background:black;
border-radius:1px;
transition:350ms all;
&:nth-of-type(1) {
transform:translatey(-3px)
}
&:nth-of-type(3) {
transform:translatey(3px)
}
}
}
.burger-3.active {
span {
margin:0;
&:nth-of-type(1) {
transform:translatey(21px) rotate(45deg);
background:red;
}
&:nth-of-type(2) {
width:100%;
height:100%;
opacity:0
}
&:nth-of-type(3) {
transform:translatey(-21px) rotate(-45deg);
background:red;
}
}
}
//
.burger-4 {
position:relative;
width:44px;
height:44px;
background:white;
cursor:pointer;
.flex();
flex-direction:column;
span {
display:block;
width:20px;
height:2px;
background:black;
border-radius:1px;
transition:350ms all;
&:nth-of-type(1) {
transform:translatey(-3px)
}
&:nth-of-type(2) {
background:black;
height:0;
width:18px;
border:1px solid black
}
&:nth-of-type(3) {
transform:translatey(3px)
}
}
}
.burger-4.active {
span {
margin:0;
&:nth-of-type(1) {
background:red;
transform:translatey(17px) rotate(-135deg);
}
&:nth-of-type(2) {
width:28px;
height:28px;
border-radius:28px;
background:none;
border:2px solid red
}
&:nth-of-type(3) {
background:red; transform:translatey(-17px) rotate(135deg);
}
}
}
//
.burger-5 {
position:relative;
width:44px;
height:44px;
overflow:hidden;
background:white;
cursor:pointer;
.flex();
flex-direction:column;
transition:1s all;
span {
display:block;
width:20px;
height:2px;
background:black;
border-radius:1px;
transition:1s all;
&:nth-of-type(1) {
transform:translate(0,-3px)
}
&:nth-of-type(2) {
}
&:nth-of-type(3) {
transform:translate(0,3px)
}
}
}
.burger-5.active {
background:red;
span {
margin:0;
background:white;
&:nth-of-type(1) {
animation:1s topBar forwards;
}
&:nth-of-type(2) {
animation:1s middleBar forwards;
}
&:nth-of-type(3) {
animation:1s bottomBar forwards;
}
}
}
.burger-5.inactive {
span {
margin:0;
&:nth-of-type(1) {
animation:1s topBarR forwards;
}
&:nth-of-type(2) {
animation:1s middleBarR forwards;
}
&:nth-of-type(3) {
animation:1s bottomBarR forwards;
}
}
}
//keyframes
@keyframes topBar {
0% {
transform:translate(0px, -3px) rotate(0deg);
width:20px
}
50% {
transform:translate(-20px, -3px) rotate(65deg);
width:2px
}
100% {
transform:translate(0px, 3px) rotate(135deg);
width:20px
}
}
@keyframes topBarR {
100% {
transform:translate(0px, -3px) rotate(0deg);
width:20px
}
50% {
transform:translate(-20px, -20px) rotate(65deg);
width:2px
}
0% {
transform:translate(0px, 3px) rotate(135deg);
width:20px
}
}
@keyframes middleBar {
0% {
transform:rotate(0deg);
opacity:1
}
100% {
transform:rotate(180deg);
opacity:0
}
}
@keyframes middleBarR {
100% {
transform:rotate(0deg);
opacity:1
}
0% {
transform:rotate(180deg);
opacity:0
}
}
@keyframes bottomBar {
0% {
transform:translate(0px, 3px) rotate(0deg);
width:20px
}
50% {
transform:translate(20px, 3px) rotate(-65deg);
width:2px
}
100% {
transform:translate(0px, -1px) rotate(-135deg);
width:20px
}
}
@keyframes bottomBarR {
100% {
transform:translate(0px, 3px) rotate(0deg);
width:20px
}
50% {
transform:translate(20px, 3px) rotate(-65deg);
width:20px
}
0% {
transform:translate(0px, -3px) rotate(-135deg);
width:20px
}
}
//codepen styling
.flex {
display:flex;
justify-content:center;
align-items:center;
}
body {
font-family:sans-serif;
height:100vh;
margin:0;
background:#ddd;
.flex()
}
View Compiled
$('.burger-1').click(function() {
$(this).toggleClass('active');
});
$('.burger-2').click(function() {
$(this).toggleClass('active');
});
$('.burger-3').click(function() {
$(this).toggleClass('active');
});
$('.burger-4').click(function() {
$(this).toggleClass('active');
});
$('.burger-5').click(function() {
$(this).toggleClass('active');
if (!$(this).hasClass("active")) {
$(this).addClass("inactive");
} else {
$(this).removeClass("inactive");
}
});
This Pen doesn't use any external CSS resources.