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

.animate-fading {
  animation: fadingIn 3s ease-in;
}

@keyframes fadingIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-top {
  position: relative;
  animation: animatetop 2s;
}

@keyframes animatetop {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

.animate-bottom {
  position: relative;
  animation: animatebottom 2s;
}

@keyframes animatebottom {
  from {
    transform: translateY(50%);
  }

  to {
    transform: translateY(0);
  }
}

.animate-left {
  position: relative;
  animation: animateleft 4s;
}

@keyframes animateleft {
  from {
    left: -300px;
    opacity: 0;
  }

  to {
    left: 0;
    opacity: 1;
  }
}

.animate-right {
  position: relative;
  animation: animateright 4s;
}

@keyframes animateright {
  from {
    right: -300px;
    opacity: 0;
  }

  to {
    right: 0;
    opacity: 1;
  }
}

.animate-zoom {
  animation: animatezoom 3s
}

@keyframes animatezoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}