.animation {
  opacity: 0;
  animation-fill-mode: forwards;
}

.animation-short-delay {
  animation-delay: 0.25s;
}

.animation-medium-delay {
  animation-delay: 0.5s;
}

.animation-long-delay {
  animation-delay: 1s;
}

.animation-extra-long-delay {
  animation-delay: 2s;
}

.animation-1s-delay {
  animation-delay: 1s;
}

.animation-2s-delay {
  animation-delay: 2s;
}

.animation-3s-delay {
  animation-delay: 3s;
}

.animation-4s-delay {
  animation-delay: 4s;
}

.animation-5s-delay {
  animation-delay: 5s;
}

.animation-6s-delay {
  animation-delay: 6s;
}

.animation-7s-delay {
  animation-delay: 7s;
}

.animation-8s-delay {
  animation-delay: 8s;
}

.animation-9s-delay {
  animation-delay: 9s;
}

.animation-10s-delay {
  animation-delay: 10s;
}
.animation-loop {
  animation-iteration-count: infinite;
}

.animation-short {
  animation-duration: 0.25s;
}

.animation-medium {
  animation-duration: 0.5s;
}

.animation-long {
  animation-duration: 1s;
}

.animation-extra-long {
  animation-duration: 2s;
}

.animation-ease {
  animation-timing-function: ease;
}

.animation-linear {
  animation-timing-function: linear;
}

.animation-ease-in {
  animation-timing-function: ease-in;
}

.animation-ease-out {
  animation-timing-function: ease-out;
}

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

.animation-linear-in {
  animation-timing-function: linear;
}

.animation-linear-out {
  animation-timing-function: linear;
}

.animation-linear-in-out {
  animation-timing-function: linear;
}

.animation-sine-in {
  animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
}

.animation-sine-out {
  animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1)
}

.animation-sine-in-out {
  animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}

.animation-quad-in {
  animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
}

.animation-quad-out {
  animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}

.animation-quad-in-out {
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

.animation-cubic-in {
  animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
}

.animation-cubic-out {
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.animation-cubic-in-out {
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

.animation-quart-in {
  animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
}

.animation-quart-out {
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.animation-quart-in-out {
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.animation-quint-in {
  animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
}

.animation-quint-out {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.animation-quint-in-out {
  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
}

.animation-exp-in {
  animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}

.animation-exp-out {
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.animation-exp-in-out {
  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}

.animation-circ-in {
  animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}

.animation-circ-out {
  animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
}

.animation-circ-in-out {
  animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
}

.animation-back-in {
  animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56);
}

.animation-back-out {
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animation-back-in-out {
  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

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

@keyframes slideInLeft {
  0% {
    transform: translateX(-5vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(5vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes rotateInY {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes rotateInX {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

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

@keyframes scaleDown {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

.animation-slide-in-left {
  animation-name: slideInLeft;
}

.animation-slide-in-right {
  animation-name: slideInRight;
}

.animation-rotate-in-y {
  animation-name: rotateInY;
}

.animation-rotate-in-x {
  animation-name: rotateInX;
}

.animation-scale-up {
  animation-name: scaleUp;
}

.animation-scale-down {
  animation-name: scaleDown;
}