Animation

/* Animation */

.-spin {
  animation: spin 2s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.-come-in {
  filter: blur(0);
  opacity: 0;
  animation: come-in var(--animation-duration) ease forwards;
  will-change: transform;

  &.-come-from-left {
    transform: translateX(calc(-1 * var(--animation-distance)));
  }

  &.-come-from-right {
    transform: translateX(var(--animation-distance));
  }

  &.-come-from-bottom {
    transform: translateY(var(--animation-distance));
  }
}

@keyframes come-in {
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}