/*-------------------------*/
/* 震动 */
.shake{
    -webkit-animation:flipInY 1s .2s ease both;
    -moz-animation:flipInY 1s .2s ease both;
    -ms-animation:flipInY 1s .2s ease both;
    animation:flipInY 1s .2s ease both;}
    @-webkit-keyframes flipInY{
        0%{-webkit-transform:perspective(400px) rotateY(90deg);
        opacity:0}
        40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
        70%{-webkit-transform:perspective(400px) rotateY(10deg)}
        100%{-webkit-transform:perspective(400px) rotateY(0deg);
        opacity:1}
    }
    @-moz-keyframes flipInY{
        0%{-moz-transform:perspective(400px) rotateY(90deg);
        opacity:0}
        40%{-moz-transform:perspective(400px) rotateY(-10deg)}
        70%{-moz-transform:perspective(400px) rotateY(10deg)}
        100%{-moz-transform:perspective(400px) rotateY(0deg);
        opacity:1}
    }
    @-ms-keyframes flipInY{
        0%{-ms-transform:perspective(400px) rotateY(90deg);
        opacity:0}
        40%{-ms-transform:perspective(400px) rotateY(-10deg)}
        70%{-ms-transform:perspective(400px) rotateY(10deg)}
        100%{-ms-transform:perspective(400px) rotateY(0deg);
        opacity:1}  

    }
    @keyframes flipInY{
        0%{transform:perspective(400px) rotateY(90deg);
        opacity:0}
        40%{transform:perspective(400px) rotateY(-10deg)}
        70%{transform:perspective(400px) rotateY(10deg)}
        100%{transform:perspective(400px) rotateY(0deg);
        opacity:1}
    }
   /*  向上飞入 */

.up-1s{
    -webkit-animation:fadeInUpBig 1s .2s ease both;
    -moz-animation:fadeInUpBig 1s .2s ease both;
    -ms-animation:fadeInUpBig 1s .2s ease both;
    animation:fadeInUpBig 1s .2s ease both;
}
    @-webkit-keyframes fadeInUpBig{
    0%{opacity:0;
    -webkit-transform:translateY(2000px)}
    100%{opacity:1;
    -webkit-transform:translateY(0)}
    }
    @-moz-keyframes fadeInUpBig{
    0%{opacity:0;
    -moz-transform:translateY(2000px)}
    100%{opacity:1;
    -moz-transform:translateY(0)}
    }
     @-ms-keyframes fadeInUpBig{
    0%{opacity:0;
    -ms-transform:translateY(2000px)}
    100%{opacity:1;
    -ms-transform:translateY(0)}
    }
     @keyframes fadeInUpBig{
    0%{opacity:0;
    transform:translateY(2000px)}
    100%{opacity:1;
    transform:translateY(0)}
    }


.up-12s{
    -webkit-animation:fadeInUpBig 1.2s .3s ease both;
    -moz-animation:fadeInUpBig 1.2s .3s ease both;
    -ms-animation:fadeInUpBig 1.2s .3s ease both;
    animation:fadeInUpBig 1.2s .3s ease both;
}
    @-webkit-keyframes fadeInUpBig{
    0%{opacity:0;
    -webkit-transform:translateY(2000px)}
    100%{opacity:1;
    -webkit-transform:translateY(0)}
    }
    @-moz-keyframes fadeInUpBig{
    0%{opacity:0;
    -moz-transform:translateY(2000px)}
    100%{opacity:1;
    -moz-transform:translateY(0)}
    }
     @-ms-keyframes fadeInUpBig{
    0%{opacity:0;
    -ms-transform:translateY(2000px)}
    100%{opacity:1;
    -ms-transform:translateY(0)}
    }
     @keyframes fadeInUpBig{
    0%{opacity:0;
    transform:translateY(2000px)}
    100%{opacity:1;
    transform:translateY(0)}
    }
.up-14s{
    -webkit-animation:fadeInUpBig 1.4s .4s ease both;
    -moz-animation:fadeInUpBig 1.4s .4s ease both;
    -ms-animation:fadeInUpBig 1.4s .4s ease both;
    animation:fadeInUpBig 1.4s .4s ease both;
}
    @-webkit-keyframes fadeInUpBig{
    0%{opacity:0;
    -webkit-transform:translateY(2000px)}
    100%{opacity:1;
    -webkit-transform:translateY(0)}
    }
    @-moz-keyframes fadeInUpBig{
    0%{opacity:0;
    -moz-transform:translateY(2000px)}
    100%{opacity:1;
    -moz-transform:translateY(0)}
    }
     @-ms-keyframes fadeInUpBig{
    0%{opacity:0;
    -ms-transform:translateY(2000px)}
    100%{opacity:1;
    -ms-transform:translateY(0)}
    }
     @keyframes fadeInUpBig{
    0%{opacity:0;
    transform:translateY(2000px)}
    100%{opacity:1;
    transform:translateY(0)}
    }
.up-16s{
    -webkit-animation:fadeInUpBig 1.6s .6s ease both;
    -moz-animation:fadeInUpBig 1.6s .6s ease both;
    -ms-animation:fadeInUpBig 1.6s .6s ease both;
    animation:fadeInUpBig 1.6s .6s ease both;
}
    @-webkit-keyframes fadeInUpBig{
    0%{opacity:0;
    -webkit-transform:translateY(2000px)}
    100%{opacity:1;
    -webkit-transform:translateY(0)}
    }
    @-moz-keyframes fadeInUpBig{
    0%{opacity:0;
    -moz-transform:translateY(2000px)}
    100%{opacity:1;
    -moz-transform:translateY(0)}
    }
     @-ms-keyframes fadeInUpBig{
    0%{opacity:0;
    -ms-transform:translateY(2000px)}
    100%{opacity:1;
    -ms-transform:translateY(0)}
    }
     @keyframes fadeInUpBig{
    0%{opacity:0;
    transform:translateY(2000px)}
    100%{opacity:1;
    transform:translateY(0)}
    }
   /*  从左边飞入 */
.FadeInLeft{
    -webkit-animation:fadeInLeftBig 1s .1s ease both;
    -moz-animation:fadeInLeftBig 1s .1s ease both;
    -ms-animation:fadeInLeftBig 1s .1s ease both;
    animation:fadeInLeftBig 1s .1s ease both;}
    @-webkit-keyframes fadeInLeftBig{
    0%{opacity:0;
    -webkit-transform:translateX(-2000px)}
    100%{opacity:1;
    -webkit-transform:translateX(0)}
    }
    @-moz-keyframes fadeInLeftBig{
    0%{opacity:0;
    -moz-transform:translateX(-2000px)}
    100%{opacity:1;
    -moz-transform:translateX(0)}
    }
     @-ms-keyframes fadeInLeftBig{
    0%{opacity:0;
    -ms-transform:translateX(-2000px)}
    100%{opacity:1;
    -ms-transform:translateX(0)}
    }
     @keyframes fadeInLeftBig{
    0%{opacity:0;
    transform:translateX(-2000px)}
    100%{opacity:1;
    transform:translateX(0)}
    }
/* 从右边飞入 */
.FadeInRight{
    -webkit-animation:fadeInRightBig 1s .1s ease both;
    -moz-animation:fadeInRightBig 1s .1s ease both;
    -ms-animation:fadeInRightBig 1s .1s ease both;
    animation:fadeInRightBig 1s .1s ease both;}
    @-webkit-keyframes fadeInRightBig{
    0%{opacity:0;
    -webkit-transform:translateX(2000px)}
    100%{opacity:1;
    -webkit-transform:translateX(0)}
    }
    @-moz-keyframes fadeInRightBig{
    0%{opacity:0;
    -moz-transform:translateX(2000px)}
    100%{opacity:1;
    -moz-transform:translateX(0)}
    }
     @-ms-keyframes fadeInRightBig{
    0%{opacity:0;
    -ms-transform:translateX(2000px)}
    100%{opacity:1;
    -ms-transform:translateX(0)}
    }
     @keyframes fadeInRightBig{
    0%{opacity:0;
    transform:translateX(2000px)}
    100%{opacity:1;
    transform:translateX(0)}
    }
 
   
/*-------------------------*/
/* 经典案例翻转图片 */
/* .pic:hover{animation: trun 3s ;}
@keyframes trun{
    to{
        transform:rotateY(360deg);
    }
}
 */