Skip to content

Instantly share code, notes, and snippets.

@bUxEE
Created March 24, 2017 11:07
Show Gist options
  • Save bUxEE/e0d72c54345be798840d2c6e5b11cec5 to your computer and use it in GitHub Desktop.
Save bUxEE/e0d72c54345be798840d2c6e5b11cec5 to your computer and use it in GitHub Desktop.
bootstrap hamburger animation
/* HAMBURGER ANIMATION 2
created by bux www.woptima.com */
.navbar-toggle{
-webkit-transition: transform;
transition: transform;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}
.navbar-toggle:not(.collapsed) {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.navbar-toggle .icon-bar {
-webkit-transition: opacity, -webkit-transform;
transition: opacity, -webkit-transform;
transition: opacity, transform;
transition: opacity, transform, -webkit-transform;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}
.navbar-toggle .icon-bar:nth-child(3) {
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
-webkit-transition-duration: 600ms;
transition-duration: 600ms;
}
.navbar-toggle .icon-bar:nth-child(2), .navbar-toggle .icon-bar:nth-child(4) {
-webkit-transition-duration: 700ms;
transition-duration: 700ms;
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(4), .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
-webkit-transform: translateY(9px) rotate(45deg);
transform: translateY(9px) rotate(45deg);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
-webkit-transform: scale(0);
transform: scale(0);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-toggle .icon-bar {
width: 30px;
height: 4px;
background-color: #1a95da;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 6px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment