/*bc_cr400*/
/*弹跳进入*/
@-webkit-keyframes bounceIn{
    0%{
        opacity:0;
        -webkit-transform:scale(.3)
    }
    50%{
        opacity:1;
        -webkit-transform: scale(1.05);
        /*opacity: 0;*/
    }
    70%{
        -webkit-transform:scale(.9)
    }
    100%{ -webkit-transform: scale(1);
        opacity: 1;
    }
}
@-moz-keyframes bounceIn{
0%{opacity:0;
-moz-transform:scale(.3)}
50%{opacity:1;
-moz-transform:scale(1.05)}
70%{-moz-transform:scale(.9)}
100%{ -moz-transform: scale(1);opacity: 1; }
}
/*上方淡入*/
@-webkit-keyframes fadeInDown{
0%{opacity:0;
-webkit-transform:translateY(-60px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
0%{opacity:0;
-moz-transform:translateY(-60px)}
100%{opacity:1;
-moz-transform:translateY(0)}
}

/*从大到小*/
@-webkit-keyframes bounceScale{
0%{opacity:0;-webkit-transform:scale(.1)}
100%{ -webkit-transform: scale(1);opacity: 1; }
}
@keyframes bounceScale{
0%{opacity:0;transform:scale(.1)}
100%{ transform: scale(1);opacity: 1; }
}

/*从右边滑动过来*/
@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        -ms-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        -ms-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        -ms-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

/*下方淡入*/
@-webkit-keyframes fadeInUp{
0%{opacity:0;
-webkit-transform:translateY(20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@keyframes fadeInUp{
0%{opacity:0;
transform:translateY(20px)}
100%{opacity:1;
    transform: translateY(0);}
}

/*旋转进入*/
@-webkit-keyframes rotateIn{
0%{-webkit-transform-origin:center center;
-webkit-transform:rotate(-360deg);
opacity:0}
100%{-webkit-transform-origin:center center;
-webkit-transform:rotate(0);
opacity:1}
}
@keyframes rotateIn{
0%{transform-origin:center center;
transform:rotate(-360deg);
opacity:0}
100%{transform-origin:center center;
transform:rotate(0);
opacity:1}
}
/*翻转*/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        -ms-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        -ms-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

/*从下方进入*/
@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

/*弹跳下方进入*/
@-webkit-keyframes bounceInUp{
0%{opacity:0;
-webkit-transform:translateY(500px)}
60%{-webkit-transform:translateY(-30px)}
80%{-webkit-transform:translateY(10px)}
100%{ -webkit-transform: translateY(0); opacity: 1; }
}
@-moz-keyframes bounceInUp{
0%{opacity:0;
-moz-transform:translateY(500px)}
60%{
-moz-transform:translateY(-30px)}
80%{-moz-transform:translateY(10px)}
100%{ -moz-transform: translateY(0);opacity: 1;}
}

/*弹跳上方进入*/
@-webkit-keyframes bounceInDown{
0%{opacity:0;
-webkit-transform:translateY(-2000px)}
60%{opacity:1;
-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{ -webkit-transform: translateY(0);opacity: 1;}
}
@-moz-keyframes bounceInDown{
0%{opacity:0;
-moz-transform:translateY(-2000px)}
60%{opacity:1;
-moz-transform:translateY(30px)}
80%{-moz-transform:translateY(-10px)}
100%{ -moz-transform: translateY(0);opacity: 1; }
}

/*左边淡入*/
@-webkit-keyframes fadeInLeft{
0%{opacity:0;
-webkit-transform:translateX(-20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@keyframes fadeInLeft{
0%{opacity:0;
transform:translateX(-20px)}
100%{opacity:1;
transform:translateX(0)}
}
/*右边淡入*/
@-webkit-keyframes fadeInRight{
0%{opacity:0;
-webkit-transform:translateX(20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@keyframes fadeInRight{
0%{opacity:0;
transform:translateX(20px)}
100%{opacity:1;
transform:translateX(0)}
}