@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-in-bottom {
  from {
    transform: translateY(25px);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes fade-in-bottom {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes slide-in-top {
  from {
    transform: translateY(-25px);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes slide-in-and-out-top {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  20% {
    opacity: 1;
    transform: translateY(0px);
  }
  80% {
    opacity: 1;
    transform: translateY(0px);
  }
  to {
    opacity: 0;
    transform: translateY(-50px);
  }
}

@keyframes scroll-background-image {
  from {
    background-position: 0% 0px;
  }
  to {
    background-position: 100% 0px;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes scale-in {
  from {
    transform: scale(0, 0);
  }
  to {
    transform: scale(1, 1);
  }
}

@keyframes jack-in-the-box {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.1) rotate(30deg);
    transform-origin: center;
  }
  16% {
    opacity: 1;
    transform: translateY(-10px) scale(1.1) rotate(-5deg);
    transform-origin: center;
  }
  30% {
    opacity: 1;
    transform: translateY(5px) scale(0.95) rotate(1deg);
    transform-origin: center;
  }
  40%,
  90% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg);
    transform-origin: center;
  }
  100% {
    opacity: 0;
    transform: translateY(0px) scale(0.95) rotate(0deg);
    transform-origin: center;
  }
}

@keyframes slide-in-bounce {
  from {
    transform: translateY(-500px);
  }
  40% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(-55px);
  }
  60% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-50px);
  }
  80% {
    transform: translateY(-35px);
  }
  90% {
    transform: translateY(-45px);
  }
  to {
    transform: translateY(-40px);
  }
}