/*弹层动画（淡入淡出）*/
/* .ani1[data-ani="show"] {
    -webkit-animation: fadeIn .2s;
    animation: fadeIn .2s;
    animation-fill-mode: forwards;
}
.ani1[data-ani="hide"] {
    -webkit-animation: fadeOut .2s;
    animation: fadeOut .2s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
} */

/*弹层动画（放大）*/
/* .ani2[data-ani="show"] {
    -webkit-animation: popIn .3s;
    animation: popIn .3s;
}
.ani2[data-ani="hide"] {
    -webkit-animation: popOut .3s;
    animation: popOut .3s;
}

@keyframes popIn {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.85, 0.85, 0.85);
        opacity: 0;
    }
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}
@keyframes popOut {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.85, 0.85, 0.85);
        opacity: 0;
    }
} */

.ani1[data-ani="show"] {
    -webkit-animation: fadeIn .3s;
    animation: fadeIn .3s;
}
.ani1[data-ani="hide"] {
    -webkit-animation: fadeOut .3s;
    animation: fadeOut .3s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*弹层动画（放大）*/

.ani2[data-ani="show"] {
    -webkit-animation: fadeleftIn .3s;
    animation: fadeleftIn .3s;
    -webkit-animation-name: popIn;
    animation-name: popIn;
}
.ani2[data-ani="hide"] {
    -webkit-animation: fadeleftOut .3s;
    animation: fadeleftOut .3s;
    -webkit-animation-name: popOut;
    animation-name: popOut;
}

@keyframes popIn {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}
@keyframes popOut {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }
}


/*弹层动画（从上往下）*/

.ani3[data-ani="show"] {
    -webkit-animation: fadeDownIn .3s;
    animation: fadeDownIn .3s;
}
.ani3[data-ani="hide"] {
    -webkit-animation: fadeDownOut .3s;
    animation: fadeDownOut .3s;
}

@keyframes fadeDownIn {
    0% {
        -webkit-transform: translate3d(0, -25%, 0);
        -webkit-transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes fadeDownOut {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    100% {
        -webkit-transform: translate3d(0, -25%, 0);
        -webkit-transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
        opacity: 0;
    }
}


/*弹层动画（从下往上）*/

.ani4[data-ani="show"] {
    -webkit-animation: fadelogIn .3s;
    animation: fadelogIn .3s;
}
.ani4[data-ani="hide"] {
    -webkit-animation: fadelogOut .3s;
    animation: fadelogOut .3s;
}

@keyframes fadelogIn {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadelogOut {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    100% {
        -webkit-transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}


/*弹层动画（从右往左）*/

.ani5[data-ani="show"] {
    -webkit-animation: fadeleftIn .3s;
    animation: fadeleftIn .3s;
}
.ani5[data-ani="hide"] {
    -webkit-animation: fadeleftOut .3s;
    animation: fadeleftOut .3s;
}

@keyframes fadeleftIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeleftOut {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    100% {
        -webkit-transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}