@keyframes ani-model-c {
    from {
        opacity: 0;
        margin-top:-50%;
    }
    to {

    }
}
@keyframes ani-model-c1 {
    from {
        opacity: 1;
    }
    to {

    }
}
@keyframes ani-model-close-c1 {
    from {

    }
    to {
        opacity: 0;
    }
}
@keyframes ani-model-close-c{
    from {

    }
    to {
        opacity: 0;
        margin-top:-80%;
    }
}

.es-model.ani-model{
    animation-name: ani-model-c1;
    animation-duration: 0.5s;
}
.ani-model .es-model-body{
    animation-name: ani-model-c;
    animation-duration: 0.5s;
}
.es-model.ani-model-close{
    animation-name: ani-model-close-c1;
    animation-duration: 0.3s;
}
.ani-model-close .es-model-body{
    animation-name: ani-model-close-c;
    animation-duration: 0.3s;
}

@keyframes ani-body-show{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.view-v6-body{
    animation-name: ani-body-show;
    animation-duration: 0.3s;
}




/* 动画效果 */
@keyframes ani-iframe-model-right{
    from {
        right: -80%;
    }
    to {
        right: 0;
    }
}

.iframe-model .content{
    animation-name: ani-iframe-model-right;
    animation-duration: 0.3s;
}

/*背景动画*/
@keyframes ani-iframe-model{
    from {
        background: rgba(0,0,0,0);
    }
    to {
        background: rgba(0,0,0,0.25);
    }
}
.iframe-model{
    animation-name: ani-iframe-model;
    animation-duration: 0.3s;
}