.login_alert {
    animation: login_alert;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes login_alert {
  0% {
    transform: perspective(100px)rotate(0deg)
  }
  16.667% {
    transform: perspective(100px)rotateX(180deg)rotateY(0);
  }
  33.333% {
    transform: perspective(100px)rotateX(180deg)rotateY(180deg);
  }
  50% {
    transform: perspective(100px)rotateX(0)rotateY(180deg);
  }
  66.667% {
    transform: perspective(100px)rotateX(0)rotateY(0);
  }
  100% {
    transform: perspective(100px)rotateX(0)rotateY(0);
  }
}


.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes rubberBand {
  0% {
  transform: scale3d(1, 1, 1);
  }
  30% {
  transform: scale3d(1.7, 0.5, 1);
  }
  40% {
  transform: scale3d(0.5, 1.7, 1);
  }
  50% {
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  transform: scale3d(0.95, 1.05, 1);
  }
  75% {
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  transform: scale3d(1, 1, 1);
  }
}