@keyframes spin-in {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-out {
  from {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.dropdown.hover-spin > .dropdown-toggle {
  & > .fa {
    // spin back, -100ms to skip the first 1/3 of the ease-in curve
    // stylelint-disable time-no-imperceptible
    // the -100ms is very perceptible
    animation: spin-out 300ms -100ms ease-in 1 normal forwards;
    // stylelint-enable time-no-imperceptible
  }

  &:hover > .fa {
    // spin, first with ease-in once then linear until hover ends
    animation:
      spin-in 1s ease-in 1 normal forwards,
      spin-in 1s linear infinite normal forwards;
  }
}