/* 從下而上 */
.toastDown{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translate(-50%);
  background-color:#000;
  color:#fff;
  padding:16px;
  border-radius:4px;
  text-align:center;
  z-index:9999;
  box-shadow:0 0 20px rgba(0,0,0,0.3);
  visibility:hidden;
  opacity:0;
}

.toastDown.showDown{
  visibility:visible;
  animation:fadeInOutFromDown 3s;
}

@keyframes fadeInOutFromDown{
  5%,95%{opacity:1;bottom:100px}
  15%,85%{opacity:1;bottom:80px}
}

/* 從上而下 */
.toastUp{
  position:fixed;
  top:0;
  left:50%;
  transform:translate(-50%);
  background-color:#000;
  color:#fff;
  padding:16px;
  border-radius:4px;
  text-align:center;
  z-index:9999;
  box-shadow:0 0 20px rgba(0,0,0,0.3);
  visibility:hidden;
  opacity:0;
}

.toastUp.showUp{
  visibility:visible;
  animation:fadeInOutFromUp 3s;
}

@keyframes fadeInOutFromUp{
  5%,95%{opacity:1;top:100px}
  15%,85%{opacity:1;top:80px}
}