CSS
html, body {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
flex-direction: row;
background: #cb2d3e;
background: -webkit-linear-gradient(to left, #cb2d3e , #ef473a);
background: linear-gradient(to left, #cb2d3e , #ef473a);
}
.hamburger {
display: flex;
align-self: center;
flex-direction: column;
justify-content: space-between;
width: 100px;
height: 60px;
cursor: pointer;
}
.hamburger div {
align-self: flex-end;
height: 6px;
width: 100%;
background: #fff;
}
.hamburger .meat {
width: 75%;
transition: all 200ms ease-in-out;
}
.hamburger .bottom-bun {
width: 50%;
transition: all 400ms ease-in-out;
}
.hamburger:hover div {
width: 100%;
}
.hamburger:hover .top-bun {
animation: burger-hover 1s infinite ease-in-out alternate;
}
.hamburger:hover .meat {
animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
}
.hamburger:hover .bottom-bun {
animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
}
@keyframes burger-hover {
0% { width: 100%; }
50% { width: 50%; }
100% { width: 100%; }
}
