/// ----------------------------------------------------------------------

/// Keyframes

/// ----------------------------------------------------------------------

/// -------------------
/// Fading
/// -------------------

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/// -------------------
/// Center Fade
/// -------------------

@keyframes centerFadeInLeft {
  0% {
    opacity: 0;
    transform: translate(1rem, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

@keyframes centerFadeInRight {
  0% {
    opacity: 0;
    transform: translate(-1rem, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

@keyframes centerFadeInTop {
  0% {
    opacity: 0;
    transform: translate(-50%, -1rem);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes centerFadeInBottom {
  0% {
    opacity: 0;
    transform: translate(-50%, 1rem);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/// -------------------
/// Zoom
/// -------------------

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

/// -------------------
/// Swipe
/// -------------------

@keyframes swipeInLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes swipeInRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes swipeInTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes swipeInBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

/// -------------------
/// Blink
/// -------------------

@keyframes blink {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/// -------------------
/// Spin
/// -------------------

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

/// -------------------
/// Cycle Background
/// -------------------

@keyframes cycleBg {
  0% {
    background-position: 0;
  }
  100% {
    background-position: -400%;
  }
}

/// -------------------
/// Move & fade
/// -------------------

@keyframes moveFadeUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0.5;
  }
}

/// -------------------
/// Move & fade
/// -------------------
@keyframes test {
  0% {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
