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

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

// animate
// source: https://github.com/animate-css/animate.css/blob/main/source/_base.css
// /////////////////////////////////////////////////////////////////////////////
.animated {
  animation-duration: 800ms;
  animation-fill-mode: both;

  &-duration-400 {
    animation-duration: 400ms;
  }

  &-duration-600 {
    animation-duration: 600ms;
  }

  &-duration-1600 {
    animation-duration: 1600ms;
  }

  &.delay-200ms {
    animation-delay: 200ms;
  }

  &.delay-400ms {
    animation-delay: 400ms;
  }

  &.delay-1s {
    animation-delay: 1000ms;
  }
}

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

  100% {
    transform: rotate(-180deg);
  }
}

.rotate-left {
  animation-name: rotate-left;
}

@keyframes rotate-left-rev {
  0% {
    transform: rotate(0deg);
  }

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

.rotate-left-rev {
  animation-name: rotate-left-rev;
}

@keyframes rotate-right {
  0% {
    transform: rotate(-180deg);
  }

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

.rotate-right {
  animation-name: rotate-right;
}

@keyframes rotate-right-rev {
  0% {
    transform: rotate(180deg);
  }

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

.rotate-right-rev {
  animation-name: rotate-right-rev;
}

// fade in
// source: https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeIn.css
// /////////////////////////////////////////////////////////////////////////////
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation-name: fade-in;
}

// pulse
// source: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/pulse.css
// /////////////////////////////////////////////////////////////////////////////
@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.5, 1.5, 1.5);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  animation-name: pulse;
  animation-timing-function: ease-in-out;
}

// tada
// source: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/tada.css
// /////////////////////////////////////////////////////////////////////////////
@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}
