/**动画基础类*/
.wss-anim {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

/**微幅从上到下*/
.wss-anim-upbit {
    -webkit-animation-name: wss-upbit;
    animation-name: wss-upbit
}

/**大幅从上到下*/
.wss-anim-up {
    -webkit-animation-name: wss-up;
    animation-name: wss-up
}

/**平滑放大*/
.wss-anim-scale {
    -webkit-animation-name: wss-scale;
    animation-name: wss-scale
}

/**弹性放大*/
.wss-anim-scaleSpring {
    -webkit-animation-name: wss-scale-spring;
    animation-name: wss-scale-spring
}

/**渐显*/
.wss-anim-fadein {
    -webkit-animation-name: wss-fadein;
    animation-name: wss-fadein
}

/**渐隐*/
.wss-anim-fadeout {
    -webkit-animation-name: wss-fadeout;
    animation-name: wss-fadeout
}

/**旋转*/
.wss-anim-rotate {
    -webkit-animation-name: wss-rotate;
    animation-name: wss-rotate;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

/**持续动画*/
.wss-anim-loop {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes wss-upbit {
    from {
        -webkit-transform: translate3d(0,30px,0);
        opacity: .3
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        opacity: 1
    }
}
@keyframes wss-upbit {
    from {
        transform: translate3d(0,30px,0);
        opacity: .3
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
@-webkit-keyframes wss-up {
    from {
        -webkit-transform: translate3d(0,100%,0);
        opacity: .3
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        opacity: 1
    }
}
@keyframes wss-up {
    from {
        transform: translate3d(0,100%,0);
        opacity: .3
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
@-webkit-keyframes wss-scale {
    0% {
        opacity: .3;
        -webkit-transform: scale(.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}
@keyframes wss-scale {
    0% {
        opacity: .3;
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    100% {
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1)
    }
}
@-webkit-keyframes wss-scale-spring {
    0% {
        opacity: .5;
        -webkit-transform: scale(.5)
    }

    80% {
        opacity: .8;
        -webkit-transform: scale(1.1)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}
@keyframes wss-scale-spring {
    0% {
        opacity: .5;
        transform: scale(.5)
    }

    80% {
        opacity: .8;
        transform: scale(1.1)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}
@-webkit-keyframes wss-fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
@keyframes wss-fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
@-webkit-keyframes wss-fadeout {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
@keyframes wss-fadeout {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
@-webkit-keyframes wss-rotate {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}
@keyframes wss-rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}