﻿

.anifromrighttoleft{
	-webkit-animation: anifromrighttoleft 1s .4s ease both;
	animation: anifromrighttoleft 1s .4s ease both;
	
}
.anifromrighttoleft2{
  -webkit-animation: anifromrighttoleft 1s  ease both;
  animation: anifromrighttoleft 1s  ease both;
  
}

@keyframes anifromrighttoleft {
     0% {
      /*opacity: 0;*/
        transform: translate(1800px);
     }
     
     100% {
     	opacity: 1;
         transform: translate(0px);
     }
  }

@-webkit-keyframes anifromrighttoleft {
     0% {
      /*opacity: 0;*/
        -webkit-transform: translatex(1800px);
     }
     
     100% {
     	opacity: 1;
         -webkit-transform: translatex(0px);
     }
  }



.anifromlefttoright{
  -webkit-animation: anifromlefttoright 1s .5s ease both;
  animation: anifromlefttoright 1s .5s ease both;
  
}

@keyframes anifromlefttoright {
     0% {
      opacity: 0;
        transform: translate(-800px);
     }
     
     100% {
      opacity: 1;
         transform: translate(0px);
     }
  }

@-webkit-keyframes anifromrighttoleft {
     0% {
      /*opacity: 0;*/
        -webkit-transform: translatex(-800px);
     }
     
     100% {
      opacity: 1;
         -webkit-transform: translatex(0px);
     }
  }








.anifromtoptobottom{
  -webkit-animation: anifromtoptobottom 1s .2s ease;
  animation: anifromtoptobottom 1s  .2s ease both;
}
.anifromtoptobottom2{
  -webkit-animation: anifromtoptobottom 2s ease;
  animation: anifromtoptobottom 2s  ease both;
  
}

@keyframes anifromtoptobottom {
     0% {
      opacity: 0;
        transform: translate(0,-300px);
     }
      70% {
      opacity: 1;
         transform: translate(0,0px);
     }
     90% {
      opacity: 1;
         transform: translate(0,-10px);
     }
     100% {
      opacity: 1;
         transform: translate(0px);
     }
  }

.anifrombottom2{
  -webkit-animation: anifrombottom2 1s .6s ease;
  animation: anifrombottom2 1s .6s ease both;
  
}


@keyframes anifrombottom2 {
     0% {
      opacity: 0;
        transform: translate(0,100px);
     }
     
     100% {
      opacity: 1;
         transform: translate(0px);
     }
  }


.fadein{
  -webkit-animation: fadein 1s .6s ease;

  animation: fadein 1s .6s ease both;
  
}


@keyframes fadein {
     0% {
      opacity: 0;
       
     }
     
     100% {
      opacity: 1;
       
     }
  }


.anifadeintotop{
  -webkit-animation: anifadeintotop 3s .6s ease both;
  animation: anifadeintotop 3s .6s ease both;
  
}

@keyframes anifadeintotop {
     0% {
      opacity: 0;
        transform: translate(0px,150px);
     }
     
     100% {
      opacity: 1;
         transform: translate(0px);
         transition-delay:300ms
     }
  }

/*about_us banner动画*/

  .aniaboutus1{
  -webkit-animation: aniaboutus 2s .2s ease infinite;
  animation: aniaboutus 2s .2s ease infinite;
  
}
.aniaboutus2{
  -webkit-animation: aniaboutus 2s .2s ease infinite;
  animation: aniaboutus 2s .2s ease infinite;
  
}

@keyframes aniaboutus {
     0% {
      opacity: 0;
        transform: translate(200px,0);
     }
     
     100% {
      opacity: 1;
         transform: translate(0px);
     }
  }

  .aniaboutustext{
    animation: aniaboutus 1s .5s ease both;
  }

/*左右浮动白云*/

.anicloud1{
  -webkit-animation: anicloud 8s .5s linear alternate infinite;
  animation: anicloud 8s .5s linear alternate infinite;
}
.anicloud2{
  -webkit-animation: anicloud 8s 2s linear alternate infinite;
  animation: anicloud 8s 2s linear alternate infinite;
}
.anicloud3{
  -webkit-animation: anicloud 8s 2.1s linear alternate infinite;
  animation: anicloud 8s 2.1s linear alternate infinite;
}
.anicloud4{
  -webkit-animation: anicloud 8s 0.8s linear alternate infinite;
  animation: anicloud 8s 0.8s linear alternate infinite;
}


@keyframes anicloud {
     0% {
      opacity: 1;
        transform: translate(0,0);
     }
     
     100% {
      opacity: 1;
         transform: translate(100px,0px);
     }
  }



  /*loan页面banner动画*/

  .anibannertextd{
  -webkit-animation: anibannertextd 1s .2s ease;
  animation: anibannertextd 1s .2s ease both;
  
}

@keyframes anibannertextd {
     0% {
      opacity: 0;
        transform: translate(0,-100px);
     }
      50% {
      opacity: .8;
         transform: translate(0，50px);
     }
     
     100% {
      opacity: 1;
         transform: translate(0px);
     }
  }




/*cundaitong页面banner文字扭曲动画*/

.anitextskew{
  -webkit-animation: anitextskew .8s 0.2s linear ;
  animation: anitextskew .8s 0.2s linear ;
}


@keyframes anitextskew {
     0% {
      opacity: .5;
        
        transform:skew(45deg,10deg);
        -webkit-transform:skew(45deg,10deg);
     }
     
     100% {
      opacity: 1;
        
         transform:skew(0deg);
         -webkit-transform:skew(0deg);
     }
  }












  /*browhaus page1动画*/

  .anihand{
  -webkit-animation: anihand 1s 0.3s linear alternate infinite;
  animation: anihand 1s 0.3s linear alternate infinite;
}


@keyframes anihand {
     0% {
      opacity: 1;
        transform: translate(0,0);
     }
     
     100% {
      opacity: 1;
         transform: translate(10px,10px);
     }
  }



  .anicicle{
  -webkit-animation: anicicle 1s 0.3s linear alternate infinite;
  animation: anicicle 1s 0.3s linear alternate infinite;
}


@keyframes anicicle {
     0% {
      opacity: 1;
        transform: scale(1);
     }
     
     100% {
      opacity: 1;
         transform: scale(.9);
     }
  }




  .anilight{
  -webkit-animation: anilight .2s 0.5s linear alternate;
  animation: anilight .2s 0.5s linear alternate;
}


@keyframes anilight {
     0% {
      opacity: 0;
        transform: scale(.3);
        transform-origin:center 80%;
     }
     
     100% {
      opacity: 1;
         transform: scale(1);
     }
  }


  .anilighter{
  -webkit-animation: anilighter 6s 0s linear  infinite;
  animation: anilighter 6s 0s linear  infinite;
}


@keyframes anilighter {
     0% {
      opacity: 1;
        transform: rotate(0deg);
        
     }
     
     100% {
      opacity: 1;
         transform: rotate(360deg);
     }
  }


  .anieyes{
  -webkit-animation: anieyes 2s 0s linear;
  animation: anieyes 2s 0s linea;
}


@keyframes anieyes {
     0% {
      opacity: 0;
        transform: scale(.5);
        
     }
     
     100% {
      opacity: 1;
        transform: scale(1);
     }
  }



  .anilarrow{
  -webkit-animation: anilarrow 1s 0.3s linear alternate infinite;
  animation: anilarrow 1s 0.3s linear alternate infinite;
}


@keyframes anilarrow {
     0% {
      opacity: 1;
        transform: translate(0,-20px;);
     }
     50% {
      opacity: 1;
        transform: translate(0,0px;);
     }
     100% {
      opacity: 1;
         transform: translate(0px,40px);
     }
  }




/*由上到下进场并弹起一次*/



.bounceindown{
    -webkit-animation:bounceindown 800ms .2s ease both;
}
@-webkit-keyframes bounceindown {
    0% {
        opacity: 0;
        -webkit-transform: translatey(-200px);
        transform: translatey(-200px)
    }

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

    80% {
        opacity: 1;
        -webkit-transform: translatey(-10px);
        transform: translatey(-10px)
    }

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



.fromlefttoright{
    -webkit-animation:fromlefttoright 500ms .2s ease both;
}
@-webkit-keyframes fromlefttoright{
0%{
    opacity:0;
    -webkit-transform:translatex(-3000px)}
100%{
    opacity:1;
    -webkit-transform:translatex(0);}
}



.fadeinfromsmall{
    -webkit-animation:fadeinfromsmall 800ms .5s ease both;
    transform-origin:50% 60%;
}
@-webkit-keyframes fadeinfromsmall {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1);
        transform: scale(0.1)
    }

    40% {
        opacity: 1;
        -webkit-transform: scale(1.02);
        transform: scale(1.02)
    }

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

@-webkit-keyframes intro05textwraptext7{
    0%{-webkit-transform:rotatex(90deg);}
    100%{-webkit-transform:rotatex(0deg);}
}


/*由上到下进场并弹起一次*/



.bounceindown{
    -webkit-animation:bounceindown 800ms .2s ease both;
}
@-webkit-keyframes bounceindown {
    0% {
        opacity: 0;
        -webkit-transform: translatey(-300px);
        transform: translatey(-300px)
    }

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

    80% {
        opacity: 1;
        -webkit-transform: translatey(-10px);
        transform: translatey(-10px)
    }

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


/*箭头移动类*/
.arrow{
    position:absolute;
    -webkit-animation:arrow 1000ms 1000ms alternate-reverse  infinite;
}

@-webkit-keyframes arrow {
    0% {
        opacity: 1;
        -webkit-transform: translatex(-16px);
        transform: translatex(-16px)
    }

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


/*箭头移动类*/
.arrowfromtop{
    -webkit-animation:arrowfromtop 1000ms 1000ms alternate-reverse  infinite;
}

@-webkit-keyframes arrowfromtop {
    0% {
        opacity: 1;
        -webkit-transform: translatey(-10px);
        transform: translatey(-10px)
    }

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