@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 100turn; /* Not truly infinite, but the concept is similar */
}

@property --i {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@mixin hvr-rotate {
  --t: -1turn; /* Controls the angle after which it loops back visually */
  --d: 0.8s; /* Transition duration on hover */

  rotate: calc(mod(var(--a), var(--t)) * var(--i));

  @starting-style {
    --a: 0turn;
  }

  &:hover {
    transition:
      --i 0s,
      --a 200s linear;
  }

  &:not(:hover) {
    --i: 0;
    --a: 0turn;

    transition:
      --i var(--d) ease-out,
      --a 0s var(--d);
  }
}