.yx_message{
    min-width:230px;
    position:fixed;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 99999999;
}
.yx_message.success_message{
    color:#649766;
    border: 1px solid #c4f1ad;
    background: #e5ffe6;
}
.yx_message.info_message{
    color: #31708f;
    border: 1px solid #bddff1;
    background: #d9edf7;
}
.yx_message.warning_message{
    color:#FFC107;
    border: 1px solid #ffe7c3;
    background: #fdfbf2;
}
.yx_message.error_message,.yx_message.danger_message{
    color:#f80c06ab;
    border: 1px solid #fbc1c1;
    background: #ffecec;
}
.yx_message.position_top{
    max-width:400px;
    top:3%;
    left:50%;
    /*transform:translate(-50%,0%);*/
}
.yx_message.position_right{
    top:10%;
    right:10px;
}
.yx_message .message_close{
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    text-align: center;
    line-height: 55px;
    right: 0;
    font-size: 1.3em;
    cursor: pointer;
    color: #fff;
    margin: 0;
}
.yx_message .typeIcon{
    font-size: 1.5em;
    position: absolute;
    top: 13px;
    left: 10px;
}
.message_close.success_close{
    background: #67C23A;
}
.message_close.info_close{
    background: #62bbe7;
}
.message_close.warning_close{
    background: #E6A23C;
}
.message_close.error_close,.message_close.danger_close{
    background: #fca8a8;
}

.yx_message .message_text{
    padding: 15px 60px 15px 40px;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
}
.yx_message .message_text.noClose{
    padding:15px 20px 15px 40px;
}

/*************** 动画start ***********************/
.bounceInRight{
    -o-animation-name: bounceInRight;
    -ms-animation-name: bounceInRight;
    -moz-animation-name: bounceInRight;
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}
/*从右边弹入*/
@-webkit-keyframes bounceInRight{
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
    }
}
@-moz-keyframes  bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -moz-transform: translate3d(0px, 0, 0);
    }
    60% {
        opacity: 1;
        -moz-transform: translate3d(-25px, 0, 0);
    }
    75% {
        -moz-transform: translate3d(10px, 0, 0);
    }
    90% {
        -moz-transform: translate3d(-5px, 0, 0);
    }
    100% {
        -moz-transform: none;
    }
}
@-ms-keyframes  bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -ms-transform: translate3d(0px, 0, 0);
    }
    60% {
        opacity: 1;
        -ms-transform: translate3d(-25px, 0, 0);
    }
    75% {
        -ms-transform: translate3d(10px, 0, 0);
    }
    90% {
        -ms-transform: translate3d(-5px, 0, 0);
    }
    100% {
        -ms-transform: none;
    }
}
@-o-keyframes  bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -o-transform: translate3d(0px, 0, 0);
    }
    60% {
        opacity: 1;
        -o-transform: translate3d(-25px, 0, 0);
    }
    75% {
        -o-transform: translate3d(10px, 0, 0);
    }
    90% {
        -o-transform: translate3d(-5px, 0, 0);
    }
    100% {
        -o-transform: none;
    }
}
@keyframes  bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(0px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        transform: none;
    }
}

/*右边弹出*/
.bounceOutRight {
    -o-animation-name: bounceOutRight;
    -ms-animation-name: bounceOutRight;
    -moz-animation-name: bounceOutRight;
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutRight{
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
    }
}
@-moz-keyframes bounceOutRight{
    20% {
        opacity: 1;
        -moz-transform: translate3d(-20px, 0, 0);
    }
    100% {
        opacity: 0;
        -moz-transform: translate3d(50px, 0, 0);
    }
}
@-ms-keyframes bounceOutRight{
    20% {
        opacity: 1;
        -ms-transform: translate3d(-20px, 0, 0);
    }
    100% {
        opacity: 0;
        -ms-transform: translate3d(50px, 0, 0);
    }
}
@-o-keyframes bounceOutRight{
    20% {
        opacity: 1;
        -o-transform: translate3d(-20px, 0, 0);
    }
    100% {
        opacity: 0;
        -o-transform: translate3d(50px, 0, 0);
    }
}
@keyframes bounceOutRight{
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
    }
}


/*向上淡入*/
.fadeInUp {
    -o-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform:translate(-50%,0%);
    }
}
@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translate3d(-50%, 100%, 0);
    }

    100% {
        opacity: 1;
        -moz-transform:translate(-50%,0%);
    }
}
@-ms-keyframes fadeInUp {
    0% {
        opacity: 0;
        -ms-transform: translate3d(-50%, 100%, 0);
    }

    100% {
        opacity: 1;
        -ms-transform:translate(-50%,0%);
    }
}
@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translate3d(-50%, 100%, 0);
    }

    100% {
        opacity: 1;
        -o-transform:translate(-50%,0%);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 100%, 0);
    }

    100% {
        opacity: 1;
        transform:translate(-50%,0%);
    }
}
/*向上淡出*/
.fadeOutUp {
    -o-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -ms-animation-name: fadeOutUp;
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform:translate(-50%,0%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -100%, 0);
    }
}
@-moz-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -moz-transform:translate(-50%,0%);
    }
    100% {
        opacity: 0;
        -moz-transform: translate3d(-50%, -100%, 0);
    }
}
@-ms-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -ms-transform:translate(-50%,0%);
    }
    100% {
        opacity: 0;
        -ms-transform: translate3d(-50%, -100%, 0);
    }
}
@-o-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -o-transform:translate(-50%,0%);
    }
    100% {
        opacity: 0;
        -o-transform: translate3d(-50%, -100%, 0);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform:translate(-50%,0%);
    }
    100% {
        opacity: 0;
        transform: translate3d(-50%, -100%, 0);
    }
}
/*************** 动画end ***********************/