@charset "UTF-8";
	/*定义动画*/
 .animated {
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        }
@keyframes fadeInBottom {
    0% {
        opacity:0;
        transform:translateY(-100px);        
    }
    100% {
        opacity:1;
        transform:translateY(0px);       
    }
}
@-webkit-keyframes fadeInBottom {
    0% {
        opacity:0;       
        -webkit-transform:translateY(-100px)
    }
    100% {
        opacity:1;        
        -webkit-transform:translateY(0px)
    }
}
@-moz-keyframes fadeInBottom {
    0% {
        opacity:0;        
        -moz-transform:translateY(-100px)
    }
    100% {
        opacity:1;       
         -moz-transform:translateY(0px)
    }
}
@-ms-keyframes fadeInBottom {
    0% {
        opacity:0;        
        -ms-transform:translateY(-100px)
    }
    100% {
        opacity:1;       
         -ms-transform:translateY(0px)
    }
}
.fadeInBottom {
    animation-name:fadeInBottom;  
    -webkit-animation-name:fadeInBottom;  
    -moz-animation-name:fadeInBottom;
    -o-animation-name:fadeInBottom;
    -ms-animation-name:fadeInBottom;
}

@keyframes fadeInTop {
    0% {
        opacity:0;
        transform:translateY(100px);        
    }
    100% {
        opacity:1;
        transform:translateY(0px);       
    }
}
@-webkit-keyframes fadeInTop {
    0% {
        opacity:0;       
        -webkit-transform:translateY(100px)
    }
    100% {
        opacity:1;        
        -webkit-transform:translateY(0px)
    }
}
@-moz-keyframes fadeInTop {
    0% {
        opacity:0;        
        -moz-transform:translateY(100px)
    }
    100% {
        opacity:1;       
         -moz-transform:translateY(0px)
    }
}
@-ms-keyframes fadeInTop {
    0% {
        opacity:0;        
        -ms-transform:translateY(100px)
    }
    100% {
        opacity:1;       
         -ms-transform:translateY(0px)
    }
}
.fadeInTop {
    animation-name:fadeInTop;  
    -webkit-animation-name:fadeInTop;  
    -moz-animation-name:fadeInTop;
    -o-animation-name:fadeInTop;
    -ms-animation-name:fadeInTop;
}

/*左侧进入*/
@keyframes fadeInleft {
    0% {
        opacity:0;
        transform:translateX(-100px);        
    }
    100% {
        opacity:1;
        transform:translateX(0px);       
    }
}
@-webkit-keyframes fadeInleft {
    0% {
        opacity:0;       
    }
    100% {
        opacity:1;        
        -webkit-transform:translateX(0px)
    }
}
@-moz-keyframes fadeInleft {
    0% {
        opacity:0;        
        -moz-transform:translateX(-100px)
    }
    100% {
        opacity:1;       
         -moz-transform:translateX(0px)
    }
}
@-ms-keyframes fadeInleft {
    0% {
        opacity:0;        
        -ms-transform:translateX(-100px)
    }
    100% {
        opacity:1;       
         -ms-transform:translateX(0px)
    }
}
.fadeInleft {
    animation-name:fadeInleft;  
    -webkit-animation-name:fadeInleft;  
    -moz-animation-name:fadeInleft;
    -o-animation-name:fadeInleft;
    -ms-animation-name:fadeInleft;
}
/* end 定义动画*/

/*2020-3-8 新增加*/
/*右侧进入*/
@keyframes fadeInRight {
    0% {
        opacity:0;
        transform:translateX(100px);        
    }
    100% {
        opacity:1;
        transform:translateX(0px);       
    }
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity:0;       
        -webkit-transform:translateX(100px)
    }
    100% {
        opacity:1;        
        -webkit-transform:translateX(0px)
    }
}
@-moz-keyframes fadeInRight {
    0% {
        opacity:0;        
        -moz-transform:translateX(100px)
    }
    100% {
        opacity:1;       
         -moz-transform:translateX(0px)
    }
}
@-ms-keyframes fadeInRight {
    0% {
        opacity:0;        
        -ms-transform:translateX(100px)
    }
    100% {
        opacity:1;       
         -ms-transform:translateX(0px)
    }
}
.fadeInRight {
    animation-name:fadeInRight;  
    -webkit-animation-name:fadeInRight;  
    -moz-animation-name:fadeInRight;
    -o-animation-name:fadeInRight;
    -ms-animation-name:fadeInRight;
}
/* end 定义动画*/

/*图片动画效果*/
/*===============1、从左到右===============*/
@keyframes rotateInDownLeft {
    0% {       
        transform:rotate(-90deg);
        transform-origin:left bottom;
        opacity:0;
    }
    100% {        
        transform:rotate(0deg);
        transform-origin:left bottom;
        opacity:1;
    }
}
@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform:rotate(-90deg);
        -webkit-transform-origin:left bottom;       
        opacity:0;
    }
    100% {
        -webkit-transform:rotate(0deg);
        -webkit-transform-origin:left bottom;       
        opacity:1;
    }
}
@-moz-keyframes rotateInDownLeft {
     0% {        
        -moz-transform:rotate(-90deg);
        -moz-transform-origin:left bottom;       
        opacity:0;
    }
    100% {
        -moz-transform:rotate(0deg);
        -moz-transform-origin:left bottom;  
        opacity:1;
    }
}
@-ms-keyframes rotateInDownLeft {
     0% {        
        -ms-transform:rotate(-90deg);
        -ms-transform-origin:left bottom;       
        opacity:0;
    }
    100% {
        -ms-transform:rotate(0deg);
        -ms-transform-origin:left bottom;  
        opacity:1;
    }
}
.rotateInDownLeft {
   animation-name:rotateInDownLeft;  
    -webkit-animation-name:rotateInDownLeft;  
    -moz-animation-name:rotateInDownLeft;
    -o-animation-name:rotateInDownLeft;    
}
/*===============2、从右到左带旋转===============*/
@keyframes rotateInDownRight {
    0% {        
        transform:rotate(90deg);
        transform-origin:right bottom;
        opacity:0;
    }
    100% {       
        transform:rotate(0deg);
        transform-origin:right bottom;
        opacity:1;
    }
}
@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform:rotate(90deg);
        -webkit-transform-origin:right bottom;        
        opacity:0;
    }
    100% {
        -webkit-transform:rotate(0deg);
        -webkit-transform-origin:right bottom;        
        opacity:1;
    }
}
.rotateInDownRight {
    animation-name:rotateInDownRight;
    -webkit-animation-name:rotateInDownRight;
    -moz-animation-name:rotateInDownRight;
}
/*===============3、从上到下===============*/
@keyframes rotateInDownTop {
    0% {                           
        transform:translate(0px,-200px);        
        opacity:0;
    }
    100% {              
        transform:translate(0px,0px);        
        opacity:1;
    }
}
@-webkit-keyframes rotateInDownTop {
    0% {
        -webkit-transform:translate(0px,-200px);
        -webkit-transform-origin:center top;       
        opacity:0;
    }
    100% {
        -webkit-transform:translate(0px,0px);
        -webkit-transform-origin:center top;       
        opacity:1;
    }
}
@-moz-keyframes rotateInDownTop {
    0% {       
        -moz-transform:translate(0px,-200px);
        -moz-transform-origin:center top;       
        opacity:0;
    }
    100% {       
        -moz-transform:translate(0px,0px);
        -moz-transform-origin:center top;        
        opacity:1;
    }
}
@-ms-keyframes rotateInDownTop {
    0% {       
        -ms-transform:translate(0px,-200px);
        -ms-transform-origin:center top;       
        opacity:0;
    }
    100% {       
        -ms-transform:translate(0px,0px);
        -ms-transform-origin:center top;        
        opacity:1;
    }
}
@-o-keyframes rotateInDownTop {
    0% {       
        -o-transform:translate(0px,-200px);
        -o-transform-origin:center top;       
        opacity:0;
    }
    100% {       
        -o-transform:translate(0px,0px);
        -o-transform-origin:center top;        
        opacity:1;
    }
}
.rotateInDownTop {
    animation-name:rotateInDownTop;
    animation-delay:0.2s;        
    -webkit-animation-name:rotateInDownTop;
    -webkit-animation-delay:0.2s;
    -moz-animation-name:rotateInDownTop;
    -moz-animation-delay:0.2s;
    -o-animation-name:rotateInDownTop;
    -o-animation-delay:0.2s;
}
/*===============4、由小变大===============*/
@keyframes scaleSmallBig {
    0% {transform:scale(0,0); opacity:0}
    100% {transform:scale(1,1);opacity:1}
}
@-webkit-keyframes scaleSmallBig {
    0% {-webkit-transform:scale(0,0);opacity:0}
    100% {-webkit-transform:scale(1,1);opacity:1}
}
@-moz-keyframes scaleSmallBig {
    0% {-moz-transform:scale(0,0);opacity:0}
    100% {-moz-transform:scale(1,1);opacity:1}
}
@-ms-keyframes scaleSmallBig {
    0% {-ms-transform:scale(0,0);opacity:0}
    100% {-ms-transform:scale(1,1);opacity:1}
}
@-o-keyframes scaleSmallBig {
    0% {-o-transform:scale(0,0);opacity:0}
    100% {-o-transform:scale(1,1);opacity:1}
}
.scaleSmallBig {
    animation-name:scaleSmallBig; 
    animation-delay:0.3s;
    -webkit-animation-name:scaleSmallBig;   
    -webkit-animation-delay:0.3s;  
    -moz-animation-name:scaleSmallBig;
    -moz-animation-delay:0.3s;    
    -o-animation-name:scaleSmallBig;    
}




/*===============5、由左侧进入带旋转===============*/
@keyframes leftPostion {
    0% {transform:translate(-300px,0) rotate(90deg);opacity:0}
    100% {transform:translate(0px,0px) rotate(0deg);opacity:1}
}
@-webkit-keyframes leftPostion {
    0% {-webkit-transform:translate(-300px,0) rotate(90deg);opacity:0}
    100% {-webkit-transform:translate(0px,0px) rotate(0deg);opacity:1}
}
@-moz-keyframes leftPostion {
    0% {-moz-transform:translate(-300px,0) rotate(90deg);opacity:0}
    100% {-moz-transform:translate(0px,0px) rotate(0deg);opacity:1}
}
.leftPostion {
    animation-name:leftPostion;   
    -webkit-animation-name:leftPostion;
    -moz-animation-name:leftPostion;    
}
/*===============6、由右侧进入===============*/
@keyframes RightPostion {
    0% {transform:translate(300px,0);opacity:0}
    100% {transform:translate(0px,0px);opacity:1}
}
@-webkit-keyframes RightPostion {
    0% {-webkit-transform:translate(300px,0);opacity:0}
    100% {-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes RightPostion {
    0% {-moz-transform:translate(300px,0);opacity:0}
    100% {-moz-transform:translate(0px,0px);opacity:1}
}
@-ms-keyframes RightPostion {
    0% {-ms-transform:translate(300px,0);opacity:0}
    100% {-ms-transform:translate(0px,0px);opacity:1}
}
.RightPostion {
    animation-name:RightPostion;   
    -webkit-animation-name:RightPostion;
    -moz-animation-name:RightPostion;    
    -ms-animation-name:RightPostion;   
}
/*===============7、由小—>大—>小—>正常===============*/
@keyframes SmallBigAnimation {
    0% {transform:scale(0.3);opacity:0}
    50% {transform:scale(1.05);opacity:1}
    70% {transform:scale(0.9);opacity:1}   
    100% {transform:scale(1,1);opacity:1}
}
@-webkit-keyframes SmallBigAnimation {
    0% {-webkit-transform:scale(0.3);opacity:0}
    50% {-webkit-transform:scale(1.05);opacity:1}
    70% {-webkit-transform:scale(0.9);opacity:1}   
    100% {-webkit-transform:scale(1,1);opacity:1}
}
@-moz-keyframes SmallBigAnimation {
    0% {-moz-transform:scale(0.3);opacity:0}
    50% {-moz-transform:scale(1.05);opacity:1}
    70% {-moz-transform:scale(0.9);opacity:1}   
    100% {-moz-transform:scale(1,1);opacity:1}
}
@-ms-keyframes SmallBigAnimation {
    0% {-ms-transform:scale(0.3);opacity:0}
    50% {-ms-transform:scale(1.05);opacity:1}
    70% {-ms-transform:scale(0.9);opacity:1}   
    100% {-ms-transform:scale(1,1);opacity:1}
}
@-o-keyframes SmallBigAnimation {
    0% {-o-transform:scale(0.3);opacity:0}
    50% {-o-transform:scale(1.05);opacity:1}
    70% {-o-transform:scale(0.9);opacity:1}   
    100% {-o-transform:scale(1,1);opacity:1}
}
.SmallBigAnimation {
    animation-name:SmallBigAnimation;
    -webkit-animation-name:SmallBigAnimation;
    -moz-animation-name:SmallBigAnimation;
    -ms-animation-name:SmallBigAnimation;
    -o-animation-name:SmallBigAnimation;
}

/*==================================2020-3-9==============================*/
/*===============8、从左侧渐隐进入===============*/
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
/*===============9、由小—>大—>小—>正常（小幅度缩放）===============*/
@keyframes SmallBigAnimation_s {
    0% {transform:scale(1,1.02);opacity:0.2}   
    20% {transform:scale(1.04,1);opacity:0.2}
    50% {transform:scale(1.06,1.08);opacity:0.8}
    70% {transform:scale(1.02,1.06);opacity:0.4}   
    100% {transform:scale(1,1.01);opacity:0.1}
}
@-webkit-keyframes SmallBigAnimation_s {
    0% {-webkit-transform:scale(1,1.02);opacity:0.2}  
    20% {-webkit-transform:scale(1.04,1);opacity:0.2}
    50% {-webkit-transform:scale(1.06,1.08);opacity:0.8}
    70% {-webkit-transform:scale(1.02,1.06);opacity:0.4}   
    100% {-webkit-transform:scale(1,1.01);opacity:0.1}
}
@-moz-keyframes SmallBigAnimation_s {
    0% {-moz-transform:scale(1,1.02);opacity:0.2}   
    20% {-moz-transform:scale(1.04,1);opacity:0.2}
    50% {-moz-transform:scale(1.06,1.08);opacity:0.8}
    70% {-moz-transform:scale(1.02,1.06);opacity:0.4}   
    100% {-moz-transform:scale(1,1.01);opacity:0.1}
}
@-ms-keyframes SmallBigAnimation_s {
    0% {-ms-transform:scale(1,1.02);opacity:0.2}   
    20% {-ms-transform:scale(1.04,1);opacity:0.2}
    50% {-ms-transform:scale(1.06,1.08);opacity:0.8}
    70% {-ms-transform:scale(1.02,1.06);opacity:0.4}   
    100% {-ms-transform:scale(1,1.01);opacity:0.1}
}
@-o-keyframes SmallBigAnimation_s {
    0% {-o-transform:scale(1,1.02);opacity:0.2}
    20% {-o-transform:scale(1.04,1);opacity:0.2}
    50% {-o-transform:scale(1.06,1.08);opacity:0.8}
    70% {-o-transform:scale(1.02,1.06);opacity:0.4}   
    100% {-o-transform:scale(1,1.01);opacity:0.1}
}
.SmallBigAnimation_s {
    animation-name:SmallBigAnimation_s;
    -webkit-animation-name:SmallBigAnimation_s;
    -moz-animation-name:SmallBigAnimation_s;
    -ms-animation-name:SmallBigAnimation_s;
    -o-animation-name:SmallBigAnimation_s;
}

/*===============9_1、由小—>大—>小—>正常（小幅度缩放第二款）===============*/
@keyframes SmallBigAnimation_s2 {
    0% {transform:scale(1,4.02);opacity:0.4}   
    20% {transform:scale(1.04,1);opacity:0.2}
    50% {transform:scale(1.06,1.08);opacity:0.8}
    70% {transform:scale(1.02,1.06);opacity:0.4}   
    100% {transform:scale(1,1.01);opacity:0.1}
}
@-webkit-keyframes SmallBigAnimation_s2 {
    0% {-webkit-transform:scale(1,4.02);opacity:0.4}  
    20% {-webkit-transform:scale(1.04,1);opacity:0.2}
    50% {-webkit-transform:scale(1.06,1.08);opacity:0.8}
    70% {-webkit-transform:scale(1.02,1.06);opacity:0.4}   
    100% {-webkit-transform:scale(1,1.01);opacity:0.1}
}
@-moz-keyframes SmallBigAnimation_s2 {
    0% {-moz-transform:scale(1,4.02);opacity:0.4} 
    20% {-moz-transform:scale(1.04,1);opacity:0.2}
    50% {-moz-transform:scale(1.06,1.08);opacity:0.8}
    70% {-moz-transform:scale(1.02,1.06);opacity:0.4}   
    100% {-moz-transform:scale(1,1.01);opacity:0.1}
}
@-ms-keyframes SmallBigAnimation_s2 {
    0% {-ms-transform:scale(1,4.02);opacity:0.4}
    20% {-ms-transform:scale(1.04,1);opacity:0.2}
    50% {-ms-transform:scale(1.06,1.08);opacity:0.8}
    70% {-ms-transform:scale(1.02,1.06);opacity:0.4}   
    100% {-ms-transform:scale(1,1.01);opacity:0.1}
}
@-o-keyframes SmallBigAnimation_s2 {
    0% {-o-transform:scale(1,4.02);opacity:0.4}
    20% {-o-transform:scale(1.04,1);opacity:0.2}
    50% {-o-transform:scale(1.06,1.08);opacity:0.8}
    70% {-o-transform:scale(1.02,1.06);opacity:0.4}   
    100% {-o-transform:scale(1,1.01);opacity:0.1}
}
.SmallBigAnimation_s2 {
    animation-name:SmallBigAnimation_s2;
    -webkit-animation-name:SmallBigAnimation_s2;
    -moz-animation-name:SmallBigAnimation_s2;
    -ms-animation-name:SmallBigAnimation_s2;
    -o-animation-name:SmallBigAnimation_s2;
}

/*============================2020-3-11================================*/

@-webkit-keyframes bounceInLeft {
    0%,100%,60%,75%,90% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px,0,0);
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px,0,0);
        transform: translate3d(25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInLeft {
    0%,100%,60%,75%,90% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px,0,0);
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px,0,0);
        transform: translate3d(25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0%,100%,60%,75%,90% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInRight {
    0%,100%,60%,75%,90% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}




/*=====合肥参考=====*/
/*-------------1-------------*/
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);   
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
   
    -webkit-transform: translateY(0);
    transform: translateY(0); 
   
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
   
    transform: translateY(0);
    
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
  
}


@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; 
}
/*-------------end 1-------------*/


/*-------------2-------------*/
@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(2000px);
    transform: scale(.1) translateY(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;    
    
    -webkit-transform-origin:left top;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;  

    -webkit-transform-origin:left top;  
  }
  70% {
    opacity: 1; 
    -webkit-transform: scale(2,2) translateY(0px);
    transform: scale(2,2) translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; 
    
    -webkit-transform-origin:left top;     
  }
  100% {
    opacity:0;   
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(2000px);
    -ms-transform: scale(.1) translateY(2000px);
    transform: scale(.1) translateY(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;    

    -webkit-transform-origin:left top;

  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    -ms-transform: scale(.475) translateY(-60px);
    transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;  
    
    -webkit-transform-origin:left top; 
  }
  70% {
    opacity: 1; 
    -webkit-transform: scale(1,1) translateY(0px);
    -ms-transform: scale(1,1) translateY(0px);
    transform: scale(1,1) translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;  
    
    -webkit-transform-origin:left top;
      
  }
  100% {
     opacity:0;   
    
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/*------------- end 2-------------*/

/*-------------3-------------*/
@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  100% {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
/*------------- end 3-------------*/
/*------------- 4 -------------*/
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    -ms-transform: scale(.475) translateY(-60px);
    transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(2000px);
    -ms-transform: scale(.1) translateY(2000px);
    transform: scale(.1) translateY(2000px);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}
/*------------- end 4 -------------*/


  @keyframes scaleBackground {  
    from {  
      background-size: 100% 100%; /* 起始大小 */  
    }  
    to {  
      background-size: 130% 130%; /* 终止大小，可以根据需要调整 */  
    }  
  }