/*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ 

.hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #303c42; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #303c42; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } 

/* * Squeeze */ 

.hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } 


/* 1. Slow down the hover effect */
.hamburger {
  transition-duration: 0.4s;
}

/* 2. Slow down the base transitions for the inner bars */
.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
  transition-duration: 0.4s;
}

/* --- SQUEEZE ANIMATION (CLOSING) --- */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.4s; /* Speed of rotation when closing */
}

.hamburger--squeeze .hamburger-inner::before {
  /* top waits 0.4s for rotation to finish, then takes 0.4s to move */
  transition: top 0.4s 0.4s ease, opacity 0.4s ease;
}

.hamburger--squeeze .hamburger-inner::after {
  /* bottom waits 0.4s for rotation to finish, then takes 0.4s to move */
  transition: bottom 0.4s 0.4s ease, transform 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* --- SQUEEZE ANIMATION (OPENING) --- */
.hamburger--squeeze.is-active .hamburger-inner {
  /* Rotation waits 0.4s for bars to collapse to center */
  transition-delay: 0.4s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
  /* Moves to center in 0.4s, then fades out after 0.4s delay */
  transition: top 0.4s ease, opacity 0.4s 0.4s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
  /* Moves to center in 0.4s, then rotates after 0.4s delay */
  transition: bottom 0.4s ease, transform 0.4s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 50px;
    height: 3px;
}