/* 引入动画1 */
@-webkit-keyframes scale-in-ver-top {
    0% {
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 1;
    }

    100% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 1;
    }
}

@keyframes scale-in-ver-top {
    0% {
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 1;
    }

    100% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 1;
    }
}


/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-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;
    }
}


/**
* ----------------------------------------
* animation slide-in-elliptic-top-fwd
* ----------------------------------------
*/
@-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
            -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            opacity: 0;
    }

    100% {
            -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
            -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
            opacity: 1;
    }
}

@keyframes slide-in-elliptic-top-fwd {
    0% {
            -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            opacity: 0;
    }

    100% {
            -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
            -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
            opacity: 1;
    }
}

/**
* ----------------------------------------
* animation roll-in-blurred-left
* ----------------------------------------
*/
@-webkit-keyframes roll-in-blurred-left {
    0% {
            -webkit-transform: translateX(-1000px) rotate(-720deg);
            transform: translateX(-1000px) rotate(-720deg);
            -webkit-filter: blur(50px);
            filter: blur(50px);
            opacity: 0;
    }

    100% {
            -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
            -webkit-filter: blur(0);
            filter: blur(0);
            opacity: 1;
    }
}

@keyframes roll-in-blurred-left {
    0% {
            -webkit-transform: translateX(-1000px) rotate(-720deg);
            transform: translateX(-1000px) rotate(-720deg);
            -webkit-filter: blur(50px);
            filter: blur(50px);
            opacity: 0;
    }

    100% {
            -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
            -webkit-filter: blur(0);
            filter: blur(0);
            opacity: 1;
    }
}


/**
* ----------------------------------------
* animation bounce-in-top
* ----------------------------------------
*/
@-webkit-keyframes bounce-in-top {
    0% {
            -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 0;
    }

    38% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
    }

    55% {
            -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    }

    72% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    }

    81% {
            -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    }

    90% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    }

    95% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    }

    100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-top {
    0% {
            -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 0;
    }

    38% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
    }

    55% {
            -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    }

    72% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    }

    81% {
            -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    }

    90% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    }

    95% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    }

    100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    }
}




/* 动画结合类 */
.reveal {
    position: relative;
    /* transform: translateY(150px); */
    opacity: 0;
    /* transition: 1s all ease; */
}

.reveal.active {
    /* transform: translateY(0); */
    animation: scale-in-ver-top 3s;
    opacity: 1;
}

/* 第二个 */
.reveal2 {
    position: relative;
    /* transform: translateY(150px); */
    opacity: 0;
    /* transition: 1s all ease; */
}

.reveal2.active {
    /* transform: translateY(0); */
    animation: slide-in-left 3s;
    opacity: 1;
}

/* 第三个 */
.reveal3 {
    position: relative;
    /* transform: translateY(150px); */
    opacity: 0;
    /* transition: 1s all ease; */
}

.reveal3.active {
    /* transform: translateY(0); */
    animation: slide-in-elliptic-top-fwd 3s;
    opacity: 1;
}

/* 第四个 */
.reveal4 {
    position: relative;
    /* transform: translateY(150px); */
    opacity: 0;
    /* transition: 1s all ease; */
}

.reveal4.active {
    /* transform: translateY(0); */
    animation: roll-in-blurred-left 3s;
    opacity: 1;
}

/* 第五个 */
.reveal5 {
    position: relative;
    /* transform: translateY(150px); */
    opacity: 0;
    /* transition: 1s all ease; */
}

.reveal5.active {
    /* transform: translateY(0); */
    animation: bounce-in-top 3s;
    opacity: 1;
}