/*�˹�����ҳ*/
.djlogo {
    top: 0;
    left: 0;
    width: 25.733%;
}
.build{-webkit-animation:fromBottom .6s ease .4s both; animation:fromBottom .6s ease .4s both;}
.slogan{-webkit-animation:bounceIn .5s ease .9s both; animation:bounceIn .5s ease .9s both;}
.nav1,.nav3,.nav5,.nav7{-webkit-animation:fromLeft .5s ease 1.6s both; animation:fromLeft .5s ease 1.6s both;}
.nav2,.nav4,.nav6,.nav8{-webkit-animation:fromRight .5s ease 1.6s both; animation:fromRight .5s ease 1.6s both;}
/*.nav7{-webkit-animation:fadeIn .8s ease 1.8s both; animation:fadeIn .8s ease 1.8s both;}*/

@-webkit-keyframes rotate{
    0%{-webkit-transform:rotate(0); }
    100%{-webkit-transform:rotate(360deg);}
}
@keyframes rotate{
    0%{-webkit-transform:rotate(0);}
    100%{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes scale{
    0%{-webkit-transform:scale(0); }
    100%{-webkit-transform:scale(1);}
}
@keyframes scale{
    0%{-webkit-transform:scale(0); }
    100%{-webkit-transform:scale(1);}
}
@keyframes fadeIn{
    0%{opacity: 0}
    100%{opacity: 1}
}
/*@keyframes flow{
    0%{opacity: 1; bottom:0}
    100%{opacity: 0; bottom:-100%}
}*/
@-webkit-keyframes light{
    0%{-webkit-transform:translate(50px,0px);}
    100%{-webkit-transform:translate(0px,0px);}
}
@keyframes light{
    0%{-webkit-transform:translate(50px,0px);}
    100%{-webkit-transform:translate(0px,0px);}
}
@-webkit-keyframes fadeIn{
    0%{opacity: 0}
    100%{opacity: 1}
}

@-webkit-keyframes fromLeft {
    0%{-webkit-transform:translate(-100px,0); opacity: 0}
    100%{-webkit-transform:translate(0,0); opacity: 1}
}
@keyframes fromLeft {
    0%{-webkit-transform:translate(-100px,0); opacity: 0}
    100%{-webkit-transform:translate(0,0); opacity: 1}
}
@-webkit-keyframes fromBottom {
    0%{-webkit-transform:translate(0,100px); opacity: 0}
    100%{-webkit-transform:translate(0,0); opacity: 1}
}
@keyframes fromBottom {
    0%{-webkit-transform:translate(0,100px); opacity: 0}
    100%{-webkit-transform:translate(0,0); opacity: 1}
}
@-webkit-keyframes fromTop {
    0%{-webkit-transform:translate(0,-200px); opacity: 0}
    100%{-webkit-transform:translate(0,0); opacity: 1}
}
@keyframes fromTop {
    0%{-webkit-transform:translate(0,-200px); opacity: 0}
    100%{-webkit-transform:translate(0,0); opacity: 1}
}
@-webkit-keyframes fromRight{
    0%{-webkit-transform:translate(100px,0); opacity: 0}
    100%{-webkit-transform:translate(0,0); opacity: 1}
}
@keyframes fromRight{
    0%{-webkit-transform:translate(100px,0); opacity: 0}
    100%{-webkit-transform:translate(0,0); opacity: 1}
}


/*���ϵ���*/
@-webkit-keyframes topBottom {
    0%{top:0%; opacity: 0}
    100%{top: 100%; opacity: 1}
}
@keyframes topBottom {
    0%{top:0%; opacity: 0}
    100%{top: 100%; opacity: 1}
}


/*�Ŵ���ֻζ� bounceIn*/
@-webkit-keyframes bounceIn {
    0%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.8, .8, .8);
        transform: scale3d(.8, .8, .8);
    }

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

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

@keyframes bounceIn {
    0%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.8, .8, .8);
        transform: scale3d(.8, .8, .8);
    }

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



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