渐隐 css3 效果

• 遇到的问题： 弹框想加CSS3效果，出来时，有动画效果，然而点击关闭时，动画是有，但是弹框消失动画结束后，任然再出现

// 动画代码
/*遮罩层 弹出动画*/
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes amt-modal-in {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        opacity: 1;
    }
}

@keyframes amt-modal-in {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
}

@-webkit-keyframes amt-modal-out {
    to {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
}

@keyframes amt-modal-out {
    to {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
}


// 遮罩层代码
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    /* animation: zoomIn 0.5s;
    -webkit-animation: zoomIn .5s; */
}
.mask .apply-alert {
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-top: 50%;
    transform: translateY(-30%);
    animation: zoomIn .5s;
    -webkit-animation: zoomIn .5s;
}

/*渐隐退出*/
.mask.out {
    display: none;
}
.mask.out .apply-alert {
    animation: amt-modal-out .6s;
    -webkit-animation: amt-modal-out .6s;
}

// 只要一开始 将 mask hide,点击某按钮时,$(.mask).show(); 此时弹框会出现动画
      // 点击确认
    $(".j-msg-footer").on("click",function(){
        $(".mask").addClass("out");
                // 因为动画 0.6s 所以 .5s 后 就将 out动画类去掉
        setTimeout(function(){
            $(".mask").hide().removeClass("out");
        },500);
    });