/*从上飞入*/
.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);
    }
}

.opac{
    animation-name:opac;
    -webkit-animation-name:opac;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes opac{
    0%{
        filter: opacity(0%);
        -webkit-filter:opacity(0%);
    }
/*    25%{
        filter:opacity(25%);
        -webkit-filter:opacity(25%);
    }*/
/*    50%{
        filter:opacity(70%);
        -webkit-filter:opacity(70%);
    }*/
/*    75%{
        filter: opacity(75%);
        -webkit-filter:opacity(75%);
    }*/
    100%{
        filter:opacity(100%);
        -webkit-filter:opacity(100%);
    }
}
@-webkit-keyframes opac{
    0%{
        filter: opacity(0%);
        -webkit-filter:opacity(0%);
    }
/*    25%{
        filter:opacity(25%);
        -webkit-filter:opacity(25%);
    }*/
/*    50%{
        filter:opacity(70%);
        -webkit-filter:opacity(70%);
    }*/
/*    75%{
        filter: opacity(75%);
        -webkit-filter:opacity(75%);
    }*/
    100%{
        filter:opacity(100%);
        -webkit-filter:opacity(100%);
    }
}
/*从左飞入*/
.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);
    }
}

/*放大缩小*/
.animator{
    animation-name: animator;
    -webkit-animation:animator;
    -webkit-animation-fill-mode:both;
    animation-fill-mode: both;
}

@keyframes animator{
    0%{
        filter: opacity(100%);
        -webkit-filter:opacity(100%);
    }
    100%{
        filter: opacity(0%);
        -webkit-filter:opacity(0%);
        display: none;
        -webkit-display:none;
        z-index: -1;
        -webkit-z-index:-1;
    }
}

@-webkit-keyframes animator{
    0%{
        filter: opacity(100%);
        -webkit-filter:opacity(100%);
    }
    100%{
        filter: opacity(0%);
        -webkit-filter:opacity(0%);
        display: none;
        -webkit-display:none;
        z-index: -1;
        -webkit-z-index:-1;
    }
}


/*动画时间*/
.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:2s;
    -webkit-animation-duration: 2s;
}
.animate-2500{
    animation-duration:2500ms;
    -webkit-animation-duration: 2500ms;
}
.animate-3000{
    animation-duration:3000ms;
    -webkit-animation-duration: 3000ms;
}
.animate-3500{
    animation-duration:2500ms;
    -webkit-animation-duration: 2500ms;
}
.animate-4000{
    animation-duration:4000ms;
    -webkit-animation-duration: 4000ms;
}
.animate-5000{
    animation-duration:5s;
    -webkit-animation-duration: 5s;
}
.animate-5500{
    animation-duration:5500ms;
    -webkit-animation-duration: 5500ms;
}

.animate-6000{
    animation-duration:4s;
    -webkit-animation-duration: 4s;
    animation-delay:4s;
    -webkit-animation-delay:4s;
}

.animate-8000{
    animation-duration:3s;
    -webkit-animation-duration: 3s;
    animation-delay:3s;
    -webkit-animation-delay:3s;
}