@keyframes leftin
{
    from {
        -webkit-transform: translateX(-12px);
        opacity: 0.2;
    }
    to {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-webkit-keyframes leftin
{
    from {
        -webkit-transform: translateX(-12px);
        opacity: 0.2;
    }
    to {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}
.left-in {
    -webkit-animation: leftin 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    animation: leftin 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes rightin
{
    from {
        -webkit-transform: translateX(110%);
        opacity: 0.2;
    }
    to {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-webkit-keyframes rightin
{
    from {
        -webkit-transform: translateX(110);
        opacity: 0.2;
    }
    to {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}
.left-in {
    -webkit-animation: leftin 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    animation: leftin 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
.right-in {
    -webkit-animation: rightin 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    animation: rightin 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

@-webkit-keyframes shadow-drop-2-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
        -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
        box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    }
}
@keyframes shadow-drop-2-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
        -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
        box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    }
}

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

/*从上到下入场动画*/
@-webkit-keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

.slide-in-blurred-top {
    -webkit-animation: slide-in-blurred-top 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    animation: slide-in-blurred-top 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

/*菜单动画效果*/
@-webkit-keyframes scale-up-ver-top {
    0% {
        opacity: .2;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}
@keyframes scale-up-ver-top {
    0% {
        opacity: .2;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}


@-webkit-keyframes human-area {
    0% {
        -webkit-box-shadow: 0px 0px 16px rgba(159,4,27,0.7);
        -moz-box-shadow: 0px 0px 16px rgba(159,4,27,0.7);
        box-shadow: 0px 0px 16px rgba(159,4,27,0.7);
    }
    100% {
        -webkit-box-shadow: 0px 0px 8px rgba(159,4,27,0.4);
        -moz-box-shadow: 0px 0px 8px rgba(159,4,27,0.4);
        box-shadow: 0px 0px 8px rgba(159,4,27,0.4);
    }
}
@keyframes human-area {
    0% {
        -webkit-box-shadow: 0px 0px 16px rgba(159,4,27,0.7);
        -moz-box-shadow: 0px 0px 16px rgba(159,4,27,0.7);
        box-shadow: 0px 0px 16px rgba(159,4,27,0.7);
    }
    100% {
        -webkit-box-shadow: 0px 0px 8px rgba(159,4,27,0.4);
        -moz-box-shadow: 0px 0px 8px rgba(159,4,27,0.4);
        box-shadow: 0px 0px 8px rgba(159,4,27,0.4);
    }
}

@-webkit-keyframes text-shadow-drop-top {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
        text-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
    }
}
@keyframes text-shadow-drop-top {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
        text-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
    }
}


@-webkit-keyframes shake-top {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }
    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}
@keyframes shake-top {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }
    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}


@-webkit-keyframes shake-top {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }
    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}
@keyframes shake-top {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }
    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}
@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}