/*带弹性消失*/
.comm-animat .vanish-animat{
    opacity: 0;
    animation: vanishScale .8s forwards;
}
/*带弹性出现*/
.comm-animat .zomm-animat{
    opacity: 0;
    animation: ZommScale .8s forwards;
}
/*从上往下带回弹*/
.comm-animat .bottom-animat{
    opacity: 0;
    animation: bottomShow .8s forwards;
}
/*从下往上带回弹*/
.comm-animat .jump-animat-1{
    opacity: 0;
    animation: yuanShow .8s 1s forwards;
}
.comm-animat .jump-animat-3{
    opacity: 0;
    animation: yuanShow .8s .3s forwards;
}
.comm-animat .jump-animat-2{
    opacity: 0;
    animation: yuanShow .8s .2s forwards;
}
.comm-animat .jump-animat-5{
    opacity: 0;
    animation: yuanShow .8s .5s forwards;
}
.comm-animat .jump-animat-8{
    opacity: 0;
    animation: yuanShow .8s .8s forwards;
}
.comm-animat .jump-animat-9{
    opacity: 0;
    animation: yuanShow .8s .9s forwards;
}
.comm-animat .jump-animat-11{
    opacity: 0;
    animation: yuanShow .8s 1.1s forwards;
}

/*从下过度至上*/
.comm-animat .bottom-up-0{
    opacity: 0;
    animation: bottomUp .8s .1s forwards;
}
.comm-animat .bottom-up-2{
    opacity: 0;
    animation: bottomUp .8s .2s forwards;
}
.comm-animat .bottom-up-3{
    opacity: 0;
    animation: bottomUp .8s .3s forwards;
}
.comm-animat .bottom-up-4{
    opacity: 0;
    animation: bottomUp .8s .4s forwards;
}
.comm-animat .bottom-up-5{
    opacity: 0;
    animation: bottomUp .8s .5s forwards;
}
.comm-animat .bottom-up-6{
    opacity: 0;
    animation: bottomUp .8s .6s forwards;
}
.comm-animat .bottom-up-7{
    opacity: 0;
    animation: bottomUp .8s .7s forwards;
}
.comm-animat .bottom-up-8{
    opacity: 0;
    animation: bottomUp .8s .8s forwards;
}
.comm-animat .bottom-up-1{
    opacity: 0;
    animation: bottomUp .8s 1s forwards;
}
.comm-animat .bottom-up{
    opacity: 0;
    animation: bottomUp .8s forwards;
}
/*从右至左*/
.comm-animat .right-left{
    opacity: 0;
    animation: RightToLeft .8s forwards;
}
.comm-animat .right-left-2{
    opacity: 0;
    animation: RightToLeft .8s .2s forwards;
}
.comm-animat .right-left-3{
    opacity: 0;
    animation: RightToLeft .8s .3s forwards;
}
.comm-animat .right-left-4{
    opacity: 0;
    animation: RightToLeft .8s .4s forwards;
}
.comm-animat .right-left-5{
    opacity: 0;
    animation: RightToLeft .8s .5s forwards;
}
.comm-animat .right-left-6{
    opacity: 0;
    animation: RightToLeft .8s .6s forwards;
}
.comm-animat .right-left-8{
    opacity: 0;
    animation: RightToLeft .8s .8s forwards;
}

/*从上过度至下*/
.comm-animat .up-bottom{
    opacity: 0;
    animation: Upbottom .8s forwards;
}
/*随机泡泡移动*/
.comm-animat .move-left{
    opacity: 0;
    animation: yuanMoveLeft 20s .6s forwards infinite;
}
.comm-animat .move-right{
    opacity: 0;
    animation: yuanMoveRight 20s .6s forwards infinite;
}

/*从左至右*/
.comm-animat .left-right{
    opacity: 0;
    animation: leftRight .8s forwards ;
}
.comm-animat .left-right-3{
    opacity: 0;
    animation: leftRight .8s .3s forwards ;
}
.comm-animat .left-right-5{
    opacity: 0;
    animation: leftRight .5s .5s forwards ;
}
.comm-animat .left-right-1{
    opacity: 0;
    animation: leftRight .8s 1s forwards ;
}
.comm-animat .left-right-8{
    opacity: 0;
    animation: leftRight .8s .8s forwards ;
}
.comm-animat .left-right-15{
    opacity: 0;
    animation: leftRight .8s 1.5s forwards ;
}
/*渐渐显示*/
.comm-animat .opacity-show{
    opacity: 0;
    animation: opacityShow .8s forwards;
}
.comm-animat .opacity-show-2{
    opacity: 0;
    animation: opacityShow .8s .2s forwards;
}
.comm-animat .opacity-show-3{
    opacity: 0;
    animation: opacityShow .8s .3s forwards;
}
.comm-animat .opacity-show-4{
    opacity: 0;
    animation: opacityShow .8s .4s forwards;
}
.comm-animat .opacity-show-5{
    opacity: 0;
    animation: opacityShow .8s .5s forwards;
}
.comm-animat .opacity-show-8{
    opacity: 0;
    animation: opacityShow .8s .8s forwards;
}
/*原地跳动*/
.comm-animat .beat-place {
    animation: beatInPlace 1s ease infinite;
}
/*原地旋转后回转*/
.comm-animat .beat-place {
    animation: beatInPlace 1s ease infinite;
}
.comm-animat .rotate-z-8{
    opacity: 0;
    animation: rotateZ 1s .8s forwards;
}
/*带弹性消失*/
@keyframes vanishScale {
    0%{
        opacity: 1;
        transform: scale(1.5);
    }
    50%{
        opacity: 0;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(.5);
    }
}

/*带弹性出现*/
@keyframes ZommScale {
    0%{
        opacity: 0;
        transform: scale(.8);
    }
    50%{
        opacity: 1;
        transform: scale(1.1);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

/*旋转还原*/
@keyframes rotateZ {
    0%{
        transform: rotateZ(30deg);
    }
    50%{
        transform: rotateZ(-30deg);
    }
    100%{
        opacity: 1;
        transform: rotateZ(0);
    }
}
@keyframes beatInPlace {
    0%{
        transform: translateY(.1rem);
    }
    30%{
        transform: translateY(0rem);
    }
    100%{
        transform: translateY(.1rem);
    }
}
@keyframes opacityShow {
    from{opacity: 0}
    to{opacity: 1}
}
/*从左至右*/
@keyframes leftRight {
    from{transform: translateX(-.3rem)}
    to{transform: translateX(0);opacity: 1;}
}

/*随机泡泡移动*/
@keyframes yuanMoveLeft {
    0%{
        transform: translate(0,0);
    }
    20%{
        transform: translate(.2rem,.4rem);
        opacity: 1;
    }
    40%{
        transform: translate(.4rem,.2rem);
        opacity: 1;
    }
    60%{
        transform: translate(.4rem,.2rem);
        opacity: 1;
    }
    80%{
        transform: translate(.2rem,.4rem);
        opacity: 1;
    }
    100%{
        transform: translate(0rem,0rem);
        opacity: 1;
    }
}
@keyframes yuanMoveRight {
    0%{
        transform: translate(0,0);
    }
    20%{
        transform: translate(-.3rem,.2rem);
        opacity: 1;
    }
    40%{
        transform: translate(-.2rem,.3rem);
        opacity: 1;
    }
    60%{
        transform: translate(-.2rem,.3rem);
        opacity: 1;
    }
    80%{
        transform: translate(-.3rem,.2rem);
        opacity: 1;
    }
    100%{
        transform: translate(0rem,0rem);
        opacity: 1;
    }
}
/*从右至左*/
@keyframes RightToLeft {
    from{
        opacity: 0;
        transform: translateX(.3rem);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
/*从下往上带回弹*/
@keyframes bottomShow {
    0%{
        opacity: 1;
        transform: translateY(.5rem);
    }
    50%{
        opacity: 1;
        transform: translateY(-.3rem);
    }
    100%{
        opacity: 1;
        transform: translateY(500%);
    }
}
/*从下往上带回弹*/
@keyframes yuanShow {
    0%{
        opacity: 0;
        transform: translateY(.5rem);
    }
    50%{
        opacity: 1;
        transform: translateY(-.3rem);
    }
    100%{
        opacity: 1;
        transform: translateY(0rem);
    }
}
/*从下过度至上*/
@keyframes bottomUp {
    from{
        transform: translateY(.3rem);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

/*从上过度至下*/
@keyframes Upbottom {
    from{
        transform: translateY(-.3rem);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}