Skip to content

Instantly share code, notes, and snippets.

@tokdaniel
Created November 13, 2020 22:46
Show Gist options
  • Save tokdaniel/cff381167a93d579fbdd325b904fc968 to your computer and use it in GitHub Desktop.
Save tokdaniel/cff381167a93d579fbdd325b904fc968 to your computer and use it in GitHub Desktop.
.hamburger {
display: flex;
flex-direction: column;
cursor: pointer;
}
.bar {
margin: 2px;
width: 24px;
height: 4px;
background: black;
border-radius: 2px
}
.bar-1 {
transition: transform 0.5s;
}
.hamburger.on .bar-1 {
transform: rotate(-45deg) translate(-7px, 6px);
transition-delay: 0.2s;
transform-origin: 50% 0%;
}
.bar-3 {
transition: transform 0.5s;
}
.hamburger.on .bar-3 {
transform: rotate(45deg) translate(-5px, -6px);
transition-delay: 0.2s;
transform-origin: 50% 50%;
}
.bar-2 {
transition: transform 0.5s, opacity 0.5s;
opacity: 1;
}
.hamburger.on .bar-2 {
transform: translateX(20px);
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment