그래디언트 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);
    });