@-webkit-keyframes dancing-dots-jump {
  0% {
    top: 0;
  }
  55% {
    top: 0;
  }
  60% {
    top: -10px;
  }
  80% {
    top: 3px;
  }
  90% {
    top: -2px;
  }
  95% {
    top: 1px;
  }
  100% {
    top: 0;
  }
}

@-moz-keyframes dancing-dots-jump {
  0% {
    top: 0;
  }
  55% {
    top: 0;
  }
  60% {
    top: -10px;
  }
  80% {
    top: 3px;
  }
  90% {
    top: -2px;
  }
  95% {
    top: 1px;
  }
  100% {
    top: 0;
  }
}

.showBox {
  animation-name: showBox;
  animation-duration: 0.5s;
}

.hideBox {
  animation-name: hideBox;
  animation-duration: 0.5s;
}

@keyframes showBox {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hideBox {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}