@keyframes slide-top {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(-30px)
    }
}

@keyframes slide-bottom {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(30px)
    }
}

@keyframes scale-up-center {
    0% {
        transform: scale(.5)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes rotate-center {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes fadeIn_option {
    from {
        opacity: .8;
    }
    to {
        opacity: 1;
    }
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -.5em;
        opacity: 0
    }
    40% {
        opacity: .6
    }
    100% {
        opacity: 1
    }
}

@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0
    }
    40% {
        opacity: .6
    }
    100% {
        letter-spacing: normal;
        opacity: 1
    }
}

@keyframes text-focus-in {
    0% {
        filter: blur(12px);
        opacity: 0
    }
    100% {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -.5em;
        filter: blur(12px);
        opacity: 0
    }
    100% {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0
    }
    40% {
        opacity: .6
    }
    100% {
        letter-spacing: normal;
        opacity: 1
    }
}

@keyframes text-shadow-drop-center {
    0% {
        text-shadow: 0 0 0 transparent
    }
    100% {
        text-shadow: 0 0 18px rgba(0, 0, 0, .35)
    }
}

@keyframes text-focus-in {
    0% {
        filter: blur(12px);
        opacity: 0
    }
    100% {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes slide-in-bck-center {
    0% {
        transform: translateZ(600px);
        opacity: 0
    }
    100% {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes swing-in-top-fwd {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0
    }
    100% {
        transform: rotateX(0deg);
        transform-origin: top;
        opacity: 1
    }
}

@keyframes blink-1 {
    0%, 50%, 100% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes fade-in-top {
    0% {
        transform: translateY(-50px);
        opacity: 0
    }
    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes text-shadow-drop-right {
    0% {
        text-shadow: 0 0 0 transparent
    }
    100% {
        text-shadow: 6px 0 18px rgba(0, 0, 0, .35)
    }
}

@keyframes blink-2 {
    0% {
        opacity: 1
    }
    50% {
        opacity: .2
    }
    100% {
        opacity: 1
    }
}

@keyframes flip-in-hor-bottom {
    0% {
        transform: rotateX(80deg);
        opacity: 0
    }
    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes flip-in-ver-right {
    0% {
        transform: rotateY(-80deg);
        opacity: 0
    }
    100% {
        transform: rotateY(0);
        opacity: 1
    }
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -.5em;
        filter: blur(12px);
        opacity: 0
    }
    100% {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        filter: blur(12px);
        opacity: 0
    }
    100% {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes flip-in-hor-bottom {
    0% {
        transform: rotateX(80deg);
        opacity: 0
    }
    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes focus-in-contract-bck {
    0% {
        letter-spacing: 1em;
        transform: translateZ(300px);
        filter: blur(12px);
        opacity: 0
    }
    100% {
        transform: translateZ(12px);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        filter: blur(12px);
        opacity: 0
    }
    100% {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes text-shadow-drop-right {
    0% {
        text-shadow: 0 0 0 transparent
    }
    100% {
        text-shadow: 6px 0 18px rgba(0, 0, 0, .35)
    }
}

@keyframes text-shadow-drop-center {
    0% {
        text-shadow: 0 0 0 transparent
    }
    100% {
        text-shadow: 0 0 18px rgba(0, 0, 0, .35)
    }
}

@keyframes puff-in-center {
    0% {
        transform: scale(2);
        filter: blur(4px);
        opacity: 0
    }
    100% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        filter: blur(12px);
        opacity: 0
    }
    100% {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes tracking-in-contract-bck {
    0% {
        letter-spacing: 1em;
        transform: translateZ(400px);
        opacity: 0
    }
    40% {
        opacity: .6
    }
    100% {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0
    }
    40% {
        opacity: .6
    }
    100% {
        letter-spacing: normal;
        opacity: 1
    }
}

@keyframes tracking-in-contract-bck-top {
    0% {
        letter-spacing: 1em;
        transform: translateZ(400px) translateY(-300px);
        opacity: 0
    }
    40% {
        opacity: .6
    }
    100% {
        transform: translateZ(0) translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-bck-center {
    0% {
        transform: translateZ(600px);
        opacity: 0
    }
    100% {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes flip-horizontal-bottom {
    0% {
        transform: rotateX(0)
    }
    100% {
        transform: rotateX(-180deg)
    }
}

@keyframes text-shadow-pop-left {
    0% {
        text-shadow: 0 0 #555, 0 0 #555, 0 0 #555, 0 0 #555, 0 0 #555, 0 0 #555, 0 0 #555, 0 0 #555;
        transform: translateX(0)
    }
    100% {
        text-shadow: -1px 0 #555, -2px 0 #555, -3px 0 #555, -4px 0 #555, -5px 0 #555, -6px 0 #555, -7px 0 #555, -8px 0 #555;
        transform: translateX(8px)
    }
}

@keyframes fade-in-left {
    0% {
        transform: translateX(-50px);
        opacity: 0
    }
    100% {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes flip-horizontal-bottom {
    0% {
        transform: rotateX(0)
    }
    100% {
        transform: rotateX(-180deg)
    }
}

@keyframes shadow-drop-center {
    0% {
        box-shadow: 0 0 0 0 transparent
    }
    100% {
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, .35)
    }
}

@keyframes slide-bottom {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(100px)
    }
}

@keyframes fade-in-bck {
    0% {
        transform: translateZ(80px);
        opacity: 0
    }
    100% {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes text-shadow-drop-center {
    0% {
        text-shadow: 0 0 0 transparent
    }
    100% {
        text-shadow: 0 0 18px rgba(0, 0, 0, .35)
    }
}

@keyframes buzz-out {

    0%,
    100%,
    20%,
    50%,
    80% {

        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

        /*贝塞尔曲线 ： X1 Y1 X2 Y2*/

        transform: translate3d(0, 0, 0); /*设置只在Z轴上移动*/

    }

    40%,
    43% {

        transition-timing-function: cubic-bezier(0.755, 0.50, 0.855, 0.060);

        transform: translate3d(0, -14px, 0);

    }

    70% {

        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

        transform: translate3d(0, -6px, 0);

    }

    90% {

        transform: translate3d(0, -2px, 0);

    }
}