/*从上飞入*/
.flyFromTop{
    animation-name: flyFromTop;
    -webkit-animation: flyFromTop;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes flyFromTop{
    0%{
        transform: translate(0px,-100%);
        -webkit-animation: translate(0px,-100%);
    }
    100%{
        transform: translate(0px,0px);
        -webkit-animation: translate(0px,0px);
    }
}
@-webkit-keyframes flyFromTop {
    0%{
        -webkit-animation:translate(0px,-100%);
        transform: translate(0px,-100%);
    }
    100%{
        -webkit-animation: translate(0px,0px);
        transform: translate(0px,0px);
    }
}
/*从下飞入*/
.flyFromBottom{
    animation-name: flyFromBottom;
    -webkit-animation: flyFromBottom;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes flyFromBottom{
    0%{
        transform: translate(0px,100%);
        -webkit-animation: translate(0px,100%);
    }
    100%{
        transform: translate(0px,0px);
        -webkit-animation: translate(0px,0px);
    }
}
@-webkit-keyframes flyFromBottom {
    0%{
        -webkit-animation:translate(0px,100%);
        transform: translate(0px,100%);
    }
    100%{
        -webkit-animation: translate(0px,0px);
        transform: translate(0px,0px);
    }
}
/*从左飞入*/
.flyFromLeft{
    animation-name: flyFromLeft;
    -webkit-animation: flyFromLeft;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes flyFromLeft{
    0%{
        transform: translate(-100%,0px);
        -webkit-animation: translate(-100%,0px);
    }
    100%{
        transform: translate(0px,0px);
        -webkit-animation: translate(0px,0px);
    }
}
@-webkit-keyframes flyFromLeft {
    0%{
        -webkit-animation:translate(-100%,0px);
        transform: translate(-100%,0px);
    }
    100%{
        -webkit-animation: translate(0px,0px);
        transform: translate(0px,0px);
    }
}
/*从右飞入*/
.flyFromRight{
    animation-name: flyFromRight;
    -webkit-animation: flyFromRight;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes flyFromRight{
    0%{
        transform: translate(100%,0);
        -webkit-animation: translate(100%,0px);
    }
    100%{
        transform: translate(0px,0px);
        -webkit-animation: translate(0px,0px);
    }
}
@-webkit-keyframes flyFromRight {
    0%{
        -webkit-animation:translate(100%,0px);
        transform: translate(100%,0px);
    }
    100%{
        -webkit-animation: translate(0px,0px);
        transform: translate(0px,0px);
    }
}
/*动画时间*/
.animate-500{
    animation-duration:500ms;
    -webkit-animation-duration: 500ms;
}
.animate-1000{
    animation-duration:1000ms;
    -webkit-animation-duration: 1000ms;
}
.animate-1500{
    animation-duration:1500ms;
    -webkit-animation-duration: 1500ms;
}
.animate-2000{
    animation-duration:2000ms;
    -webkit-animation-duration: 2000ms;
}
.animate-2500{
    animation-duration:2500ms;
    -webkit-animation-duration: 2500ms;
}
.animate-3000{
    animation-duration:3000ms;
    -webkit-animation-duration: 3000ms;
}