.animate {
    transition: 0.6s opacity;
    position: relative;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in;
}

.animate.duration05 {
    animation-duration: .5s;
}

.animate.duration10 {
    animation-duration: 1s;
}

.animate.duration20 {
    animation-duration: 2s;
}

/* 显示 */
.animate.showElement {
    -webkit-animation-name: showElement;
    animation-name: showElement;
}

/* 隐藏 */
.animate.hideElement {
    -webkit-animation-name: hideElement;
    animation-name: hideElement;
}

/* 翻转缩小隐藏 */
.animate.holeOut {
    -webkit-animation-name: holeOut;
    animation-name: holeOut;
}

/* 翻转放大显示 */
.animate.holeSign {
    -webkit-animation-name: holeSign;
    animation-name: holeSign;
}

/* 从小变大 */
.animate.swashIn {
    -webkit-animation-name: swashIn;
    animation-name: swashIn;
}

/* 从小变大虚化效果 */
.animate.vanishIn {
    -webkit-animation-name: vanishIn;
    animation-name: vanishIn;
}

/* 从下往上 */
.animate.tinDownIn {
    -webkit-animation-name: tinDownIn;
    animation-name: tinDownIn;
}

/* 从下往上 */
.animate.slideUp {
    -webkit-animation-name: slideUp;
    animation-name: slideUp;
}

/* 从上往下 */
.animate.tinDownOut {
    -webkit-animation-name: tinDownOut;
    animation-name: tinDownOut;
}

/* 从左往右*/
.animate.leftrightIn {
    -webkit-animation-name: leftrightIn;
    animation-name: leftrightIn;
}

/* 从右往左 */
.animate.rightleftIn {
    -webkit-animation-name: rightleftIn;
    animation-name: rightleftIn;
}

/* 上下来回移动 */
.animate.updown {
    -webkit-animation-name: updown;
    animation-name: updown;
    animation-iteration-count: infinite;
}

/* 左右来回移动 */
.animate.leftright {
    -webkit-animation-name: leftright;
    animation-name: leftright;
    animation-iteration-count: infinite;
}

/* 上下来回移动 */
@-webkit-keyframes updown {
    0% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(10px);
    }

    50% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(0px);
    }

    100% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(10px);
    }
}

/* 左右来回移动 */
@-webkit-keyframes leftright {
    0% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateX(50px);
    }

    50% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateX(0px);
    }

    100% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateX(50px);
    }
}

@-ms-keyframes leftright {
    0% {
        -ms-transform-origin: 0 0;
        -ms-transform: translateX(50px);
    }

    50% {
        -ms-transform-origin: 0 0;
        -ms-transform: translateX(0px);
    }

    100% {
        -ms-transform-origin: 0 0;
        -ms-transform: translateX(50px);
    }
}

/* 从下轻微往上 */
@-webkit-keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(0%);
    }

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

/* 从大到小虚化效果 */
@-webkit-keyframes vanishIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(2, 2);
        -webkit-filter: blur(90px);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        -webkit-filter: blur(0px);
    }
}

/* 从下往上 */
@-webkit-keyframes tinDownIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(300%);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0);
    }
}
/* 从左往右 */
@-webkit-keyframes rightleftIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(300%);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0);
    }
}
/* 从右往左 */
@-webkit-keyframes leftrightIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(-300%);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0);
    }
}

/* 从上往下 */
@-webkit-keyframes tinDownOut {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(-300%);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0);
    }
}

/* 从小变大 */
@-webkit-keyframes swashIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0);
    }

    90% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0.9, 0.9);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
    }
}

/* 显示 */
@-webkit-keyframes showElement {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 隐藏 */
@-webkit-keyframes hideElement {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 翻转缩小隐藏 */
@-webkit-keyframes holeOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1) rotateY(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0) rotateY(180deg);
    }
}

/* 翻转放大显示 */
@-webkit-keyframes holeSign {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0) rotateY(180deg);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1) rotateY(0deg);
    }
}

.delay00 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.delay01 {
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}
.delay02 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}
.delay03 {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
.delay04 {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}
.delay05 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
.delay06 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
.delay07 {
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
}
.delay08 {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
.delay09 {
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}
.delay10 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.delay11 {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.delay12 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.delay13 {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
.delay14 {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
.delay15 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.delay16 {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
.delay17 {
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}
.delay18 {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.delay19 {
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
}
.delay20 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.delay21 {
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}
.delay22 {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
.delay23 {
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s;
}
.delay24 {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
.delay25 {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.delay26 {
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
}
.delay27 {
    -webkit-animation-delay: 2.7s;
    animation-delay: 2.7s;
}
.delay28 {
    -webkit-animation-delay: 2.8s;
    animation-delay: 2.8s;
}
.delay29 {
    -webkit-animation-delay: 2.9s;
    animation-delay: 2.9s;
}
.delay30 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.delay31 {
    -webkit-animation-delay: 3.1s;
    animation-delay: 3.1s;
}
.delay32 {
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
}
.delay33 {
    -webkit-animation-delay: 3.3s;
    animation-delay: 3.3s;
}
.delay34 {
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
}
.delay35 {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
.delay36 {
    -webkit-animation-delay: 3.6s;
    animation-delay: 3.6s;
}
.delay37 {
    -webkit-animation-delay: 3.7s;
    animation-delay: 3.7s;
}
.delay38 {
    -webkit-animation-delay: 3.8s;
    animation-delay: 3.8s;
}
.delay39 {
    -webkit-animation-delay: 3.9s;
    animation-delay: 3.9s;
}
.delay40 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.delay42 {
    -webkit-animation-delay: 4.2s;
    animation-delay: 4.2s;
}
.delay50 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}
.delay55 {
    -webkit-animation-delay: 5.5s;
    animation-delay: 5.5s;
}
.delay60 {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.delay70 {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}
.delay75 {
    -webkit-animation-delay: 7.5s;
    animation-delay: 7.5s;
}