/*** I learnt from this https://learnku.com/f2e/t/29779 *******/
@font-face {
  font-family: "fontawesome";
  src: url("/font-awesome/webfonts/fa-solid-900.eot");
  src: url("/font-awesome/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/font-awesome/webfonts/fa-solid-900.woff") format("woff"), url("/font-awesome/webfonts/fa-solid-900.ttf") format("truetype"), url("/font-awesome/webfonts/fa-solid-900.svg#micon") format("svg");
}
@-moz-keyframes message-move-in-center {
  0% {
/* 前边分析过了，弹出动画是一个自上而下的淡入过程 */
/* 所以在动画初始状态要把元素的不透明度设置为0，在动画结束的时候再把不透明度设置1，这样就会实现一个淡入动画 */
    opacity: 0;
/* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */
/* translateY(-100%)表示动画初始状态，元素在实际位置上面“自身一个高度”的位置。 */
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
/* 平移到自身位置 */
    transform: translateY(0);
  }
}
@-webkit-keyframes message-move-in-center {
  0% {
/* 前边分析过了，弹出动画是一个自上而下的淡入过程 */
/* 所以在动画初始状态要把元素的不透明度设置为0，在动画结束的时候再把不透明度设置1，这样就会实现一个淡入动画 */
    opacity: 0;
/* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */
/* translateY(-100%)表示动画初始状态，元素在实际位置上面“自身一个高度”的位置。 */
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
/* 平移到自身位置 */
    transform: translateY(0);
  }
}
@-o-keyframes message-move-in-center {
  0% {
/* 前边分析过了，弹出动画是一个自上而下的淡入过程 */
/* 所以在动画初始状态要把元素的不透明度设置为0，在动画结束的时候再把不透明度设置1，这样就会实现一个淡入动画 */
    opacity: 0;
/* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */
/* translateY(-100%)表示动画初始状态，元素在实际位置上面“自身一个高度”的位置。 */
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
/* 平移到自身位置 */
    transform: translateY(0);
  }
}
@keyframes message-move-in-center {
  0% {
/* 前边分析过了，弹出动画是一个自上而下的淡入过程 */
/* 所以在动画初始状态要把元素的不透明度设置为0，在动画结束的时候再把不透明度设置1，这样就会实现一个淡入动画 */
    opacity: 0;
/* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */
/* translateY(-100%)表示动画初始状态，元素在实际位置上面“自身一个高度”的位置。 */
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
/* 平移到自身位置 */
    transform: translateY(0);
  }
}
@-moz-keyframes message-move-out-center {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@-webkit-keyframes message-move-out-center {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@-o-keyframes message-move-out-center {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes message-move-out-center {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@-moz-keyframes message-move-in-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes message-move-in-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-o-keyframes message-move-in-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes message-move-in-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-moz-keyframes message-move-out-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@-webkit-keyframes message-move-out-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@-o-keyframes message-move-out-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes message-move-out-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@-moz-keyframes message-move-in-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes message-move-in-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-o-keyframes message-move-in-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes message-move-in-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-moz-keyframes message-move-out-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes message-move-out-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@-o-keyframes message-move-out-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes message-move-out-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* message.css */
#message-alert {
  z-index: 100;
  position: fixed;
  max-width: 70%;
  top: 75px;
/* 采用flex弹性布局，让容器内部的所有消息可以水平居中，还能任意的调整宽度 */
  display: flex;
  flex-direction: column;
  margin: auto;
}
#message-alert .alert-icon {
  margin-right: 10px;
}
#message-alert .message {
  color: #fff;
  background: #202020;
  margin: 10px 0;
  padding: 12px 15px;
  height: auto;
  box-shadow: 0 0 5px 0 #aeaeae;
  font-size: 16px;
  border-radius: 3px;
/* 让消息内部的三个元素（图标、文本、关闭按钮）可以垂直水平居中 */
  display: flex;
  align-items: center;
  transition: height 0.2s ease-in-out, margin 0.2s ease-in-out;
}
#message-alert .message .text {
  padding: 0 5px;
}
#message-alert .warning-message {
  background-color: #ffb74d !important;
}
#message-alert .success-message {
  background-color: #4caf50 !important;
}
#message-alert .error-message {
  background-color: #f44336 !important;
}
#message-alert .info-message {
  background-color: #428bca !important;
}
#message-alert {
  left: 0;
  right: 0;
  align-items: center;
}
#message-alert .message.message-move-in {
  animation: message-move-in-center 0.3s ease-in-out;
}
#message-alert .message.message-move-out {
  animation: message-move-out-center 0.3s ease-in-out;
/* 让动画结束后保持结束状态 */
  animation-fill-mode: forwards;
}