:root {
  --distance: 2rem;
  --duration: 500ms;
  --scale: 1.25rem;
}

@keyframes rotate {
  to {
    transform: rotate(359deg);
  }
}

.is-visible {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transform: translateY(0);
  transition-duration: 500ms;
  transition-duration: var(--duration);
  transition-timing-function: ease-in-out;
  opacity: 1;
}

.is-visible[data-origin="right"] {
    transform: translateX(0);
  }

.is-visible[data-origin="left"] {
    transform: translateX(0);
  }

.is-visible[data-origin="up"] {
    transform: scale(100);
  }

.is-invisible {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transform: translateY(2rem);
  transform: translateY(var(--distance));
  transition-duration: 500ms;
  transition-duration: var(--duration);
  transition-timing-function: ease-in-out;
  opacity: 0;
}

.is-invisible[data-origin="right"] {
    transform: translateX(2rem) translateY(0);
    transform: translateX(var(--distance)) translateY(0);
  }

.is-invisible[data-origin="left"] {
    transform: translateX(-2rem) translateY(0);
    transform: translateX(calc(var(--distance)*-1)) translateY(0);
  }

.is-invisible[data-origin="up"] {
    transform: scale(1.25rem) translateY(0);
    transform: scale(var(--scale)) translateY(0);
  }