各种弹窗

1.可以不设置宽高，使用flex带动画的弹窗，不支持ie10及以下
动画效果为先小后大

<div class="popup-wrapper">
    <div class="popup-content-wrapper">
      这是一个带动画的弹窗这是一个带动画的弹窗
      这是一个带动画的弹窗这是一个带动画的弹窗
      这是一个带动画的弹窗这是一个带动画的弹窗
    </div>
  </div>

.popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
}
.popup-content-wrapper {
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  width: 32em;
  /*max-width: 100%;*/
  padding: 1.25em;
  border: none;
  border-radius: .3125em;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  margin: 0 auto;
  animation: popupAnimal 0.3s;
}
@keyframes popupAnimal {
  0% {
    transform: scale(0.7);
  }
  45% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(.95);
  }
  100% {
    transform: scale(1);
  }
}

2.需要设置宽高，使用transform实现
不设置高度的话，里面为文字，边框会变模糊,因为transform的原因，高度要设置成偶数
动画效果：从上到下

<div class="rlPopup">
      <div class="rl-inner">
        这是一个带动画的弹窗这是一个带动画的弹窗
        这是一个带动画的弹窗这是一个带动画的弹窗
        这是一个带动画的弹窗这是一个带动画的弹窗
      </div>
    </div>

.rlPopup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.rl-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 154px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 10px;
  animation: popupMove 0.3s;
  overflow: hidden;
}
/*弹窗动画*/
@keyframes popupMove {
  from {
    top: 0;
  }
  to {
    top: 50%;
    opacity: 1;
  }
}