.drop-down { 
  animation-name: drop-down;
  animation-duration: 0.75s; 
  animation-fill-mode: forwards;
}

@keyframes drop-down {
0% {
  opacity: 0;
  transform: translate(0,-30px);
}
100% {
  opacity: 1;
  transform: translate(0, 0);
  }
}
.drop-long { 
  animation-name: drop-long;
  animation-duration: 2s; 
  animation-fill-mode: forwards;
}

@keyframes drop-long {
0% {
  opacity: 0;
  transform: translate(0,-300px);
}
100% {
  opacity: 1;
  transform: translate(0, 0);
  }
}
.drop-up { 
  animation-name: drop-up;
  animation-duration: 0.75s; 
  animation-fill-mode: forwards;
}

@keyframes drop-up {
0% {
  opacity: 1;
  transform: translate(0,0);
}
100% {
  opacity: 0;
  transform: translate(0, -30px);
  }
}

.slide-left { 
    animation-name: slide-left;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
 }

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.slide-right { 
    animation-name: slide-right;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
 }

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translate(-100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.blur {
  animation-name: blur;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}

@keyframes blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}