.popup {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    flex: 1;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    animation-duration: 280ms;
    background-color: rgba(0, 0, 0, 0.7);
}

.popup-content {
    overflow: hidden;
}

.fade-out {
    opacity: 0;
    display: none;
}

.popup-center {
    transform: scale(0.3, 0.3);
}

.popup-top {
    transform: translateY(-1000px);
}

.popup-bottom {
    transform: translateY(600px);
}

.popup-left {
    transform: translateX(-600px);
}

.popup-right {
    transform: translateX(600px);
}

.transition-all {
    transition: all 0.2s ease-in 0s;
}


/* 使用记录 : switch-navigation2 popup */

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    animation: fade-in 150ms ease-in forwards;
}


/* 使用记录 : image popup */

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fade-out {
    animation: fade-out 150ms ease-out forwards;
}


/* 使用记录 : popup */

@keyframes top-in {
    0% {
        transform: translateY(-1000px);
    }
    100% {
        transform: translateY(0px);
    }
}

.top-in {
    animation: top-in 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes top-out {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-1000px);
    }
}

.top-out {
    animation: top-out 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes bottom-in {
    0% {
        transform: translateY(600px);
    }
    100% {
        transform: translateY(0px);
    }
}

.bottom-in {
    animation: bottom-in 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes bottom-out {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(600px);
    }
}

.bottom-out {
    animation: bottom-out 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes left-in {
    0% {
        transform: translateX(-600px);
    }
    100% {
        transform: translateX(0px);
    }
}

.left-in {
    animation: left-in 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes left-out {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-600px);
    }
}

.left-out {
    animation: left-out 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes right-in {
    0% {
        transform: translateX(600px);
    }
    100% {
        transform: translateX(0px);
    }
}

.right-in {
    animation: right-in 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes right-out {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(600px);
    }
}

.right-out {
    animation: right-out 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes scale-in {
    0% {
        transform: scale(0.3, 0.3);
    }
    100% {
        transform: scale(1, 1);
    }
}

.scale-in {
    animation: scale-in 150ms linear forwards;
}


/* 使用记录 : popup */

@keyframes scale-out {
    0% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(0.3, 0.3);
    }
}

.scale-out {
    animation: scale-out 150ms linear forwards;
}


/* 使用记录 : page */

@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.rotate360 {
    animation: rotate360 1200ms infinite linear;
}