/*弹层动画（放大）*/
.popIn {
    -webkit-animation: popIn .25s;
    animation: popIn .25s;
}

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

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

/*弹层动画（缩小）*/
.popOut {
    -webkit-animation: popOut .25s;
    animation: popOut .25s;
	/* 保留动画结束后的样子 */
	animation-fill-mode: forwards;
}

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

@keyframes popOut {
    0% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    50% {
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
        transform: scale3d(0, 0, 0);;
        opacity: 0;
    }
}