_spring-r.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. @if index($hamburger-types, spring-r) {
  2. /*
  3. * Spring Reverse
  4. */
  5. .hamburger--spring-r {
  6. .hamburger-inner {
  7. top: auto;
  8. bottom: 0;
  9. transition-duration: 0.13s;
  10. transition-delay: 0s;
  11. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  12. &::after {
  13. top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
  14. transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
  15. opacity 0s linear;
  16. }
  17. &::before {
  18. transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
  19. transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  20. }
  21. }
  22. &.is-active {
  23. .hamburger-inner {
  24. transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
  25. transition-delay: 0.22s;
  26. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  27. &::after {
  28. top: 0;
  29. opacity: 0;
  30. transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
  31. opacity 0s 0.22s linear;
  32. }
  33. &::before {
  34. top: 0;
  35. transform: rotate(90deg);
  36. transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
  37. transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  38. }
  39. }
  40. }
  41. }
  42. }