@keyframes move
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: translate(0);
    }
}

@-moz-keyframes move /* Firefox */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -moz-transform: translate(0);
    }
}

@-webkit-keyframes move /* Safari 和 Chrome */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
    }
}

@-o-keyframes move /* Opera */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -o-transform: translateY(0);
    }
}
.anim-top{
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
}
.anim-bottom{
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
}
.anim-left{
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
}
.anim-right{
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
}

.anim-item{
    opacity: 0;
}
.animate .anim-show,.animate.anim-show{
    opacity: 1;
    animation: move 1.5s forwards;
    -moz-animation: move 1.5s forwards;
    -webkit-animation: move 1.5s forwards;
    -o-animation: move 1.5s forwards;
}
@media screen and (max-width: 768px){
    .anim-item{
        opacity: 1 !important;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}