.falling {
  animation-name: falling_kf;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes falling_kf {
  from {
    translate: 0% -300%;
  }
  to {
    translate: 0% 300%;
  }
}

.bouncing {
  animation-name: bouncing_kf;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease-in;
}

@keyframes bouncing_kf {
  from {
    translate: 0% -150%;
  }
  to {
    translate: 0% 150%;
  }
}

.drop {
  animation-name: drop_kf;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  translate: 0% 140%;
  animation-timing-function: linear;
}

@keyframes drop_kf {
  from {
    translate: 0% -300%;
  }
  to {
    translate: 0% 150%;
  }
}

.pattern {
  animation-name: pattern_kf;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

@keyframes pattern_kf {
  0% {
    translate: 0% -150%;
  }

  25% {
    translate: 150% 0%;
  }

  50% {
    translate: 0% 150%;
  }

  75% {
    translate: -150% 0%;
  }

  100% {
    translate: 0% -150%;
  }
}

.zoom_out {
  animation-name: zoom_out_kf;
  animation-duration: 1s;
  scale: 0.2 0.2;
}

@keyframes zoom_out_kf {
  from {
    scale: 1 1;
  }

  to {
    scale: 0.2 0.2;
  }
}

.zoom_in {
  animation-name: zoom_in_kf;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes zoom_in_kf {
  from {
    scale: 1 1;
  }

  to {
    scale: 5 5;
  }
}

.fade_out {
  animation-name: fade_out_kf;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fade_out_kf {
  from {
    opacity: 100%;
  }

  to {
    opacity: 0%;
  }
}

.fade_in {
  animation-name: fade_in_kf;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fade_in_kf {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

.rotation {
  animation-name: rotation_kf;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotation_kf {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.rotation2 {
  animation-name: rotation2_kf;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  translate: -100% 40%;
}

@keyframes rotation2_kf {
  from {
    rotate: 0deg;
    transform-origin: 150% 0%;
  }

  to {
    rotate: 360deg;
    transform-origin: 150% 0%;
  }
}

.glow {
  animation-name: glow_kf;
  animation-duration: 1s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

@keyframes glow_kf {
  from {
    filter: drop-shadow(0px 0px 5px white);
  }

  to {
    filter: drop-shadow(0px 0px 20px yellow);
  }
}

.blur_to_gray {
  animation-name: blur_to_gray_kf;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease-in-out;
}

@keyframes blur_to_gray_kf {
  from {
    translate: -150% 0%;
    rotate: 0deg;
  }
  to {
    translate: 150% 0%;
    rotate: 360deg;
    filter: blur(2px) grayscale();
  }
}

.pulse {
  animation-name: pulse_kf;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: linear;
}

@keyframes pulse_kf {
  from {
    scale: 0.9 0.9;
  }

  to {
    scale: 1.1 1.1;
  }
}

.overshoot {
  animation-name: overshoot_kf;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: forwards;
}

@keyframes overshoot_kf {
  from {
    translate: -120% 0%;
    rotate: 0deg;
  }

  to {
    translate: 120% 0%;
    rotate: 360deg;
  }
}

.bounce {
  animation-name: bounce_kf;
  animation-duration: 2.5s;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes bounce_kf {
  0% {
    translate: -140% -100%;
  }

  10% {
    translate: -140% 140%;
  }

  20% {
    translate: -70% -50%;
  }

  30% {
    translate: -70% 140%;
  }

  40% {
    translate: -0% 0%;
  }

  50% {
    translate: -0% 140%;
  }

  60% {
    translate: 70% 50%;
  }

  70% {
    translate: 70% 140%;
  }

  80% {
    translate: 140% 100%;
  }

  90% {
    translate: 140% 140%;
  }

  100% {
    translate: 140% 140%;
  }
}

.squash {
  animation-name: squash_kf;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-timing-function: linear;
}

@keyframes squash_kf {
  0% {
    translate: 0% -170%;
    scale: 1 0.8;
  }
  5% {
    scale: 1 1;
  }
  20% {
    scale: 1 1;
  }

  25% {
    translate: 150% 0%;
    scale: 0.8 1;
  }

  30% {
    scale: 1 1;
  }
  45% {
    scale: 1 1;
  }

  50% {
    translate: 0% 150%;
    scale: 1 0.8;
  }
  55% {
    scale: 1 1;
  }
  70% {
    scale: 1 1;
  }

  75% {
    translate: -170% 0%;
    scale: 0.8 1;
  }

  80% {
    scale: 1 1;
  }
  95% {
    scale: 1 1;
  }

  100% {
    translate: 0% -150%;
    scale: 1 0.8;
  }
}