_spin-r.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. @if index($hamburger-types, spin-r) {
  2. /*
  3. * Spin Reverse
  4. */
  5. .hamburger--spin-r {
  6. .hamburger-inner {
  7. transition-duration: 0.22s;
  8. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  9. &::before {
  10. transition: top 0.1s 0.25s ease-in,
  11. opacity 0.1s ease-in;
  12. }
  13. &::after {
  14. transition: bottom 0.1s 0.25s ease-in,
  15. transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  16. }
  17. }
  18. &.is-active {
  19. .hamburger-inner {
  20. transform: rotate(-225deg);
  21. transition-delay: 0.12s;
  22. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  23. &::before {
  24. top: 0;
  25. opacity: 0;
  26. transition: top 0.1s ease-out,
  27. opacity 0.1s 0.12s ease-out;
  28. }
  29. &::after {
  30. bottom: 0;
  31. transform: rotate(90deg);
  32. transition: bottom 0.1s ease-out,
  33. transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
  34. }
  35. }
  36. }
  37. }
  38. }