hamburgers.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
  1. /*!
  2. * Hamburgers
  3. * @description Tasty CSS-animated hamburgers
  4. * @author Jonathan Suh @jonsuh
  5. * @site https://jonsuh.com/hamburgers
  6. * @link https://github.com/jonsuh/hamburgers
  7. */
  8. .hamburger {
  9. padding: 15px 15px;
  10. display: inline-block;
  11. cursor: pointer;
  12. transition-property: opacity, filter;
  13. transition-duration: 0.15s;
  14. transition-timing-function: linear;
  15. font: inherit;
  16. color: inherit;
  17. text-transform: none;
  18. background-color: transparent;
  19. border: 0;
  20. margin: 0;
  21. overflow: visible; }
  22. .hamburger:hover {
  23. opacity: 0.7; }
  24. .hamburger-box {
  25. width: 40px;
  26. height: 24px;
  27. display: inline-block;
  28. position: relative; }
  29. .hamburger-inner {
  30. display: block;
  31. top: 50%;
  32. margin-top: -2px; }
  33. .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  34. width: 40px;
  35. height: 4px;
  36. background-color: #000;
  37. border-radius: 4px;
  38. position: absolute;
  39. transition-property: transform;
  40. transition-duration: 0.15s;
  41. transition-timing-function: ease; }
  42. .hamburger-inner::before, .hamburger-inner::after {
  43. content: "";
  44. display: block; }
  45. .hamburger-inner::before {
  46. top: -10px; }
  47. .hamburger-inner::after {
  48. bottom: -10px; }
  49. /*
  50. * 3DX
  51. */
  52. .hamburger--3dx .hamburger-box {
  53. perspective: 80px; }
  54. .hamburger--3dx .hamburger-inner {
  55. transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  56. .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
  57. transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  58. .hamburger--3dx.is-active .hamburger-inner {
  59. background-color: transparent;
  60. transform: rotateY(180deg); }
  61. .hamburger--3dx.is-active .hamburger-inner::before {
  62. transform: translate3d(0, 10px, 0) rotate(45deg); }
  63. .hamburger--3dx.is-active .hamburger-inner::after {
  64. transform: translate3d(0, -10px, 0) rotate(-45deg); }
  65. /*
  66. * 3DX Reverse
  67. */
  68. .hamburger--3dx-r .hamburger-box {
  69. perspective: 80px; }
  70. .hamburger--3dx-r .hamburger-inner {
  71. transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  72. .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
  73. transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  74. .hamburger--3dx-r.is-active .hamburger-inner {
  75. background-color: transparent;
  76. transform: rotateY(-180deg); }
  77. .hamburger--3dx-r.is-active .hamburger-inner::before {
  78. transform: translate3d(0, 10px, 0) rotate(45deg); }
  79. .hamburger--3dx-r.is-active .hamburger-inner::after {
  80. transform: translate3d(0, -10px, 0) rotate(-45deg); }
  81. /*
  82. * 3DY
  83. */
  84. .hamburger--3dy .hamburger-box {
  85. perspective: 80px; }
  86. .hamburger--3dy .hamburger-inner {
  87. transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  88. .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
  89. transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  90. .hamburger--3dy.is-active .hamburger-inner {
  91. background-color: transparent;
  92. transform: rotateX(-180deg); }
  93. .hamburger--3dy.is-active .hamburger-inner::before {
  94. transform: translate3d(0, 10px, 0) rotate(45deg); }
  95. .hamburger--3dy.is-active .hamburger-inner::after {
  96. transform: translate3d(0, -10px, 0) rotate(-45deg); }
  97. /*
  98. * 3DY Reverse
  99. */
  100. .hamburger--3dy-r .hamburger-box {
  101. perspective: 80px; }
  102. .hamburger--3dy-r .hamburger-inner {
  103. transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  104. .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
  105. transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  106. .hamburger--3dy-r.is-active .hamburger-inner {
  107. background-color: transparent;
  108. transform: rotateX(180deg); }
  109. .hamburger--3dy-r.is-active .hamburger-inner::before {
  110. transform: translate3d(0, 10px, 0) rotate(45deg); }
  111. .hamburger--3dy-r.is-active .hamburger-inner::after {
  112. transform: translate3d(0, -10px, 0) rotate(-45deg); }
  113. /*
  114. * Arrow
  115. */
  116. .hamburger--arrow.is-active .hamburger-inner::before {
  117. transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
  118. .hamburger--arrow.is-active .hamburger-inner::after {
  119. transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
  120. /*
  121. * Arrow Right
  122. */
  123. .hamburger--arrow-r.is-active .hamburger-inner::before {
  124. transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
  125. .hamburger--arrow-r.is-active .hamburger-inner::after {
  126. transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
  127. /*
  128. * Arrow Alt
  129. */
  130. .hamburger--arrowalt .hamburger-inner::before {
  131. transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
  132. .hamburger--arrowalt .hamburger-inner::after {
  133. transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
  134. .hamburger--arrowalt.is-active .hamburger-inner::before {
  135. top: 0;
  136. transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
  137. transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
  138. .hamburger--arrowalt.is-active .hamburger-inner::after {
  139. bottom: 0;
  140. transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
  141. transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
  142. /*
  143. * Arrow Alt Right
  144. */
  145. .hamburger--arrowalt-r .hamburger-inner::before {
  146. transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
  147. .hamburger--arrowalt-r .hamburger-inner::after {
  148. transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
  149. .hamburger--arrowalt-r.is-active .hamburger-inner::before {
  150. top: 0;
  151. transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
  152. transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
  153. .hamburger--arrowalt-r.is-active .hamburger-inner::after {
  154. bottom: 0;
  155. transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
  156. transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
  157. /*
  158. * Boring
  159. */
  160. .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
  161. transition-property: none; }
  162. .hamburger--boring.is-active .hamburger-inner {
  163. transform: rotate(45deg); }
  164. .hamburger--boring.is-active .hamburger-inner::before {
  165. top: 0;
  166. opacity: 0; }
  167. .hamburger--boring.is-active .hamburger-inner::after {
  168. bottom: 0;
  169. transform: rotate(-90deg); }
  170. /*
  171. * Collapse
  172. */
  173. .hamburger--collapse .hamburger-inner {
  174. top: auto;
  175. bottom: 0;
  176. transition-duration: 0.15s;
  177. transition-delay: 0.15s;
  178. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  179. .hamburger--collapse .hamburger-inner::after {
  180. top: -20px;
  181. transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  182. .hamburger--collapse .hamburger-inner::before {
  183. transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  184. .hamburger--collapse.is-active .hamburger-inner {
  185. transform: translate3d(0, -10px, 0) rotate(-45deg);
  186. transition-delay: 0.32s;
  187. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  188. .hamburger--collapse.is-active .hamburger-inner::after {
  189. top: 0;
  190. opacity: 0;
  191. transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear; }
  192. .hamburger--collapse.is-active .hamburger-inner::before {
  193. top: 0;
  194. transform: rotate(-90deg);
  195. transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1); }
  196. /*
  197. * Collapse Reverse
  198. */
  199. .hamburger--collapse-r .hamburger-inner {
  200. top: auto;
  201. bottom: 0;
  202. transition-duration: 0.15s;
  203. transition-delay: 0.15s;
  204. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  205. .hamburger--collapse-r .hamburger-inner::after {
  206. top: -20px;
  207. transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  208. .hamburger--collapse-r .hamburger-inner::before {
  209. transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  210. .hamburger--collapse-r.is-active .hamburger-inner {
  211. transform: translate3d(0, -10px, 0) rotate(45deg);
  212. transition-delay: 0.32s;
  213. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  214. .hamburger--collapse-r.is-active .hamburger-inner::after {
  215. top: 0;
  216. opacity: 0;
  217. transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear; }
  218. .hamburger--collapse-r.is-active .hamburger-inner::before {
  219. top: 0;
  220. transform: rotate(90deg);
  221. transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1); }
  222. /*
  223. * Elastic
  224. */
  225. .hamburger--elastic .hamburger-inner {
  226. top: 2px;
  227. transition-duration: 0.4s;
  228. transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  229. .hamburger--elastic .hamburger-inner::before {
  230. top: 10px;
  231. transition: opacity 0.15s 0.4s ease; }
  232. .hamburger--elastic .hamburger-inner::after {
  233. top: 20px;
  234. transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  235. .hamburger--elastic.is-active .hamburger-inner {
  236. transform: translate3d(0, 10px, 0) rotate(135deg);
  237. transition-delay: 0.1s; }
  238. .hamburger--elastic.is-active .hamburger-inner::before {
  239. transition-delay: 0s;
  240. opacity: 0; }
  241. .hamburger--elastic.is-active .hamburger-inner::after {
  242. transform: translate3d(0, -20px, 0) rotate(-270deg);
  243. transition-delay: 0.1s; }
  244. /*
  245. * Elastic Reverse
  246. */
  247. .hamburger--elastic-r .hamburger-inner {
  248. top: 2px;
  249. transition-duration: 0.4s;
  250. transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  251. .hamburger--elastic-r .hamburger-inner::before {
  252. top: 10px;
  253. transition: opacity 0.15s 0.4s ease; }
  254. .hamburger--elastic-r .hamburger-inner::after {
  255. top: 20px;
  256. transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  257. .hamburger--elastic-r.is-active .hamburger-inner {
  258. transform: translate3d(0, 10px, 0) rotate(-135deg);
  259. transition-delay: 0.1s; }
  260. .hamburger--elastic-r.is-active .hamburger-inner::before {
  261. transition-delay: 0s;
  262. opacity: 0; }
  263. .hamburger--elastic-r.is-active .hamburger-inner::after {
  264. transform: translate3d(0, -20px, 0) rotate(270deg);
  265. transition-delay: 0.1s; }
  266. /*
  267. * Emphatic
  268. */
  269. .hamburger--emphatic {
  270. overflow: hidden; }
  271. .hamburger--emphatic .hamburger-inner {
  272. transition: background-color 0.2s 0.25s ease-in; }
  273. .hamburger--emphatic .hamburger-inner::before {
  274. left: 0;
  275. transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in; }
  276. .hamburger--emphatic .hamburger-inner::after {
  277. top: 10px;
  278. right: 0;
  279. transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in; }
  280. .hamburger--emphatic.is-active .hamburger-inner {
  281. transition-delay: 0s;
  282. transition-timing-function: ease-out;
  283. background-color: transparent; }
  284. .hamburger--emphatic.is-active .hamburger-inner::before {
  285. left: -80px;
  286. top: -80px;
  287. transform: translate3d(80px, 80px, 0) rotate(45deg);
  288. transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
  289. .hamburger--emphatic.is-active .hamburger-inner::after {
  290. right: -80px;
  291. top: -80px;
  292. transform: translate3d(-80px, 80px, 0) rotate(-45deg);
  293. transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
  294. /*
  295. * Emphatic Reverse
  296. */
  297. .hamburger--emphatic-r {
  298. overflow: hidden; }
  299. .hamburger--emphatic-r .hamburger-inner {
  300. transition: background-color 0.2s 0.25s ease-in; }
  301. .hamburger--emphatic-r .hamburger-inner::before {
  302. left: 0;
  303. transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in; }
  304. .hamburger--emphatic-r .hamburger-inner::after {
  305. top: 10px;
  306. right: 0;
  307. transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in; }
  308. .hamburger--emphatic-r.is-active .hamburger-inner {
  309. transition-delay: 0s;
  310. transition-timing-function: ease-out;
  311. background-color: transparent; }
  312. .hamburger--emphatic-r.is-active .hamburger-inner::before {
  313. left: -80px;
  314. top: 80px;
  315. transform: translate3d(80px, -80px, 0) rotate(-45deg);
  316. transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
  317. .hamburger--emphatic-r.is-active .hamburger-inner::after {
  318. right: -80px;
  319. top: 80px;
  320. transform: translate3d(-80px, -80px, 0) rotate(45deg);
  321. transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
  322. /*
  323. * Slider
  324. */
  325. .hamburger--slider .hamburger-inner {
  326. top: 2px; }
  327. .hamburger--slider .hamburger-inner::before {
  328. top: 10px;
  329. transition-property: transform, opacity;
  330. transition-timing-function: ease;
  331. transition-duration: 0.2s; }
  332. .hamburger--slider .hamburger-inner::after {
  333. top: 20px; }
  334. .hamburger--slider.is-active .hamburger-inner {
  335. transform: translate3d(0, 10px, 0) rotate(45deg); }
  336. .hamburger--slider.is-active .hamburger-inner::before {
  337. transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  338. opacity: 0; }
  339. .hamburger--slider.is-active .hamburger-inner::after {
  340. transform: translate3d(0, -20px, 0) rotate(-90deg); }
  341. /*
  342. * Slider Reverse
  343. */
  344. .hamburger--slider-r .hamburger-inner {
  345. top: 2px; }
  346. .hamburger--slider-r .hamburger-inner::before {
  347. top: 10px;
  348. transition-property: transform, opacity;
  349. transition-timing-function: ease;
  350. transition-duration: 0.2s; }
  351. .hamburger--slider-r .hamburger-inner::after {
  352. top: 20px; }
  353. .hamburger--slider-r.is-active .hamburger-inner {
  354. transform: translate3d(0, 10px, 0) rotate(-45deg); }
  355. .hamburger--slider-r.is-active .hamburger-inner::before {
  356. transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
  357. opacity: 0; }
  358. .hamburger--slider-r.is-active .hamburger-inner::after {
  359. transform: translate3d(0, -20px, 0) rotate(90deg); }
  360. /*
  361. * Spring
  362. */
  363. .hamburger--spring .hamburger-inner {
  364. top: 2px;
  365. transition: background-color 0s 0.15s linear; }
  366. .hamburger--spring .hamburger-inner::before {
  367. top: 10px;
  368. transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  369. .hamburger--spring .hamburger-inner::after {
  370. top: 20px;
  371. transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  372. .hamburger--spring.is-active .hamburger-inner {
  373. transition-delay: 0.32s;
  374. background-color: transparent; }
  375. .hamburger--spring.is-active .hamburger-inner::before {
  376. top: 0;
  377. transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
  378. transform: translate3d(0, 10px, 0) rotate(45deg); }
  379. .hamburger--spring.is-active .hamburger-inner::after {
  380. top: 0;
  381. transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
  382. transform: translate3d(0, 10px, 0) rotate(-45deg); }
  383. /*
  384. * Spring Reverse
  385. */
  386. .hamburger--spring-r .hamburger-inner {
  387. top: auto;
  388. bottom: 0;
  389. transition-duration: 0.15s;
  390. transition-delay: 0s;
  391. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  392. .hamburger--spring-r .hamburger-inner::after {
  393. top: -20px;
  394. transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
  395. .hamburger--spring-r .hamburger-inner::before {
  396. transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  397. .hamburger--spring-r.is-active .hamburger-inner {
  398. transform: translate3d(0, -10px, 0) rotate(-45deg);
  399. transition-delay: 0.32s;
  400. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  401. .hamburger--spring-r.is-active .hamburger-inner::after {
  402. top: 0;
  403. opacity: 0;
  404. transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.32s linear; }
  405. .hamburger--spring-r.is-active .hamburger-inner::before {
  406. top: 0;
  407. transform: rotate(90deg);
  408. transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); }
  409. /*
  410. * Stand
  411. */
  412. .hamburger--stand .hamburger-inner {
  413. transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear; }
  414. .hamburger--stand .hamburger-inner::before {
  415. transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  416. .hamburger--stand .hamburger-inner::after {
  417. transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  418. .hamburger--stand.is-active .hamburger-inner {
  419. transform: rotate(90deg);
  420. background-color: transparent;
  421. transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear; }
  422. .hamburger--stand.is-active .hamburger-inner::before {
  423. top: 0;
  424. transform: rotate(-45deg);
  425. transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
  426. .hamburger--stand.is-active .hamburger-inner::after {
  427. bottom: 0;
  428. transform: rotate(45deg);
  429. transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
  430. /*
  431. * Stand Reverse
  432. */
  433. .hamburger--stand-r .hamburger-inner {
  434. transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear; }
  435. .hamburger--stand-r .hamburger-inner::before {
  436. transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  437. .hamburger--stand-r .hamburger-inner::after {
  438. transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  439. .hamburger--stand-r.is-active .hamburger-inner {
  440. transform: rotate(-90deg);
  441. background-color: transparent;
  442. transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear; }
  443. .hamburger--stand-r.is-active .hamburger-inner::before {
  444. top: 0;
  445. transform: rotate(-45deg);
  446. transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
  447. .hamburger--stand-r.is-active .hamburger-inner::after {
  448. bottom: 0;
  449. transform: rotate(45deg);
  450. transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
  451. /*
  452. * Spin
  453. */
  454. .hamburger--spin .hamburger-inner {
  455. transition-duration: 0.3s;
  456. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  457. .hamburger--spin .hamburger-inner::before {
  458. transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
  459. .hamburger--spin .hamburger-inner::after {
  460. transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  461. .hamburger--spin.is-active .hamburger-inner {
  462. transform: rotate(225deg);
  463. transition-delay: 0.14s;
  464. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  465. .hamburger--spin.is-active .hamburger-inner::before {
  466. top: 0;
  467. opacity: 0;
  468. transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
  469. .hamburger--spin.is-active .hamburger-inner::after {
  470. bottom: 0;
  471. transform: rotate(-90deg);
  472. transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }
  473. /*
  474. * Spin Reverse
  475. */
  476. .hamburger--spin-r .hamburger-inner {
  477. transition-duration: 0.3s;
  478. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  479. .hamburger--spin-r .hamburger-inner::before {
  480. transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
  481. .hamburger--spin-r .hamburger-inner::after {
  482. transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  483. .hamburger--spin-r.is-active .hamburger-inner {
  484. transform: rotate(-225deg);
  485. transition-delay: 0.14s;
  486. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  487. .hamburger--spin-r.is-active .hamburger-inner::before {
  488. top: 0;
  489. opacity: 0;
  490. transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
  491. .hamburger--spin-r.is-active .hamburger-inner::after {
  492. bottom: 0;
  493. transform: rotate(90deg);
  494. transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }
  495. /*
  496. * Squeeze
  497. */
  498. .hamburger--squeeze .hamburger-inner {
  499. transition-duration: 0.1s;
  500. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  501. .hamburger--squeeze .hamburger-inner::before {
  502. transition: top 0.1s 0.14s ease, opacity 0.1s ease; }
  503. .hamburger--squeeze .hamburger-inner::after {
  504. transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  505. .hamburger--squeeze.is-active .hamburger-inner {
  506. transform: rotate(45deg);
  507. transition-delay: 0.14s;
  508. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  509. .hamburger--squeeze.is-active .hamburger-inner::before {
  510. top: 0;
  511. opacity: 0;
  512. transition: top 0.1s ease, opacity 0.1s 0.14s ease; }
  513. .hamburger--squeeze.is-active .hamburger-inner::after {
  514. bottom: 0;
  515. transform: rotate(-90deg);
  516. transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }
  517. /*
  518. * Vortex
  519. */
  520. .hamburger--vortex .hamburger-inner {
  521. transition-duration: 0.3s;
  522. transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  523. .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
  524. transition-duration: 0s;
  525. transition-delay: 0.1s;
  526. transition-timing-function: linear; }
  527. .hamburger--vortex .hamburger-inner::before {
  528. transition-property: top, opacity; }
  529. .hamburger--vortex .hamburger-inner::after {
  530. transition-property: bottom, transform; }
  531. .hamburger--vortex.is-active .hamburger-inner {
  532. transform: rotate(765deg);
  533. transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  534. .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
  535. transition-delay: 0s; }
  536. .hamburger--vortex.is-active .hamburger-inner::before {
  537. top: 0;
  538. opacity: 0; }
  539. .hamburger--vortex.is-active .hamburger-inner::after {
  540. bottom: 0;
  541. transform: rotate(90deg); }
  542. /*
  543. * Vortex Reverse
  544. */
  545. .hamburger--vortex-r .hamburger-inner {
  546. transition-duration: 0.3s;
  547. transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  548. .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
  549. transition-duration: 0s;
  550. transition-delay: 0.1s;
  551. transition-timing-function: linear; }
  552. .hamburger--vortex-r .hamburger-inner::before {
  553. transition-property: top, opacity; }
  554. .hamburger--vortex-r .hamburger-inner::after {
  555. transition-property: bottom, transform; }
  556. .hamburger--vortex-r.is-active .hamburger-inner {
  557. transform: rotate(-765deg);
  558. transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  559. .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
  560. transition-delay: 0s; }
  561. .hamburger--vortex-r.is-active .hamburger-inner::before {
  562. top: 0;
  563. opacity: 0; }
  564. .hamburger--vortex-r.is-active .hamburger-inner::after {
  565. bottom: 0;
  566. transform: rotate(-90deg); }