//动画
//动画时间1
#{$V}animate {
    transition: all .5s ease;
}
#{$V}animate-fast {
    transition: all .2s ease;
}
/*动画时间2*/
#{$V}anim {
    animation-duration: 1s;
    animation-fill-mode: both;
    &.v-faster {
        animation-duration: .25s;
    }
    &.v-fast {
        animation-duration: .5s;
    }
    &.v-slow {
        animation-duration: 1.5s;
    }
    &.v-infinite {
        animation-iteration-count: infinite;
    } 
    //闪烁
    &.v-Flash {
        animation-name: vusFlash;
    } 
    //逐渐(显示)
    &.v-FadeIn {
        animation-name: VusFadeIn;
    }
	/*逐渐(隐藏)*/
	&.v-FadeOut {
	    animation-name: VusFadeOut;
	}
	/*向上滑动(显示)*/
	&.v-UpFadeIn {
	    animation-name: VusUpFadeIn;
	}
	/*向上滑动(隐藏)*/
	&.v-UpFadeOut {
	    animation-name: VusUpFadeOut;
	}
	/*向下滑动(显示)*/
	&.v-DownFadeIn {
	    animation-name: VusDownFadeIn;
	}
	/*向下滑动(隐藏)*/
	&.v-DownFadeOut {
	    animation-name: VusDownFadeOut;
	}
	/*向右滑动(显示)*/
	&.v-LeftFadeIn {
	    animation-name: VusLeftFadeIn;
	}
	/*向右滑动(隐藏)*/
	&.v-LeftFadeOut {
	    animation-name: VusLeftFadeOut;
	}
	/*向左滑动(显示)*/
	&.v-RightFadeIn {
	    animation-name: VusRightFadeIn;
	}
	/*向左滑动(隐藏)*/
	&.v-RightFadeOut {
	    animation-name: VusRightFadeOut;
	}
	//由小到大(显示)
	&.v-TinyZoomIn {
	    animation-name: VusTinyZoomIn;
	}
	//由小到大(隐藏)
	&.v-TinyZoomOut {
	    animation-name: VusTinyZoomOut;
	}
	//由大到小(显示)
	&.v-BigZoomIn {
	    animation-name: VusBigZoomIn;
	}
	//由大到小(隐藏)
	&.v-BigZoomOut {
	    animation-name: VusBigZoomOut;
	}
	//向上放大出现(贝塞尔)
	&.v-UpZoomIn {
	    animation-name: VusUpZoomIn;
	}
	//向下放大出现(贝塞尔)
	&.v-DownZoomIn {
	    animation-name: VusDownZoomIn
	}
	//从左放大出现(贝塞尔)
	&.v-LeftZoomIn {
	    animation-name: VusLeftZoomIn;
	}
	//从右放大出现(贝塞尔)
	&.v-RightZoomIn {
	    animation-name: VusRightZoomIn;
	}
	//翻转
	&.v-Flip {
	    animation-name: VusFlip;
	    backface-visibility: visible;
	}
	//左右抖动
	&.v-Shake {
	    animation-name: VusShake;
	}
	//上下反弹跳动
	&.v-Bounce {
	    animation-name: VusBounce;
	    transform-origin: center bottom;
	}
	//左边滑动(出现)
	&.v-LeftBounceIn {
	    animation-name: VusLeftBounceIn;
	}
	//左边滑动(隐藏)
	&.v-LeftBounceOut {
	    animation-name: VusBounceOutLeft;
	}
	//右边滑动(出现)
	&.v-RightBounceIn {
	    animation-name: VusRightBounceIn;
	}
	//右边滑动(隐藏)
	&.v-RightBounceOut {
	    animation-name: VusRightBounceOut;
	}
	//拉橡皮
	&.v-RubberBand {
	    animation-name: VusRubberBand;
	}
}
//Spin
//旋转
#{$V}anim-spin {
    animation: VusSpin 2s infinite linear;
}
//脉动旋转
#{$V}anim-pulse {
    animation: VusSpin 1s infinite steps(8);
}
//加载
#{$V}anim-load {
    animation: VusLoadSpin 1s step-end infinite;
}
@keyframes VusSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
@keyframes VusLoadSpin {
    0% {
        transform: rotate(0deg);
    }
    8.33333333% {
        transform: rotate(30deg);
    }
    16.66666667% {
        transform: rotate(60deg);
    }
    25% {
        transform: rotate(90deg);
    }
    33.33333333% {
        transform: rotate(120deg);
    }
    41.66666667% {
        transform: rotate(150deg);
    }
    50% {
        transform: rotate(180deg);
    }
    58.33333333% {
        transform: rotate(210deg);
    }
    66.66666667% {
        transform: rotate(240deg);
    }
    75% {
        transform: rotate(270deg);
    }
    83.33333333% {
        transform: rotate(300deg);
    }
    91.66666667% {
        transform: rotate(330deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
//闪烁
@keyframes vusFlash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
//Fade
//逐渐(显示)
@keyframes VusFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
//逐渐(隐藏)
@keyframes VusFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
//向上滑动(显示)
@keyframes VusUpFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
//向上滑动(隐藏)
@keyframes VusUpFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}
//向下滑动(显示)
@keyframes VusDownFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
//向下滑动(隐藏)
@keyframes VusDownFadeOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}
//向右滑动(显示)
@keyframes VusLeftFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
//向右滑动(隐藏)
@keyframes VusLeftFadeOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}
//向左滑动(显示)
@keyframes VusRightFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
//向左滑动(隐藏)
@keyframes VusRightFadeOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

//Zoom
//由小到大(显示)
@keyframes VusTinyZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
//由小到大(隐藏)
@keyframes VusTinyZoomOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
}
//由大到小(显示)
@keyframes VusBigZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
//由大到小(隐藏)
@keyframes VusBigZoomOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2);
    }
}
//向上放大出现(贝塞尔)
@keyframes VusUpZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    }
    100% {
        transform: none;
    }
}
//向下放大出现(贝塞尔)
@keyframes VusDownZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    }
    100% {
        transform: none;
    }
}
//从左放大出现(贝塞尔)
@keyframes VusLeftZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    }
    100% {
        transform: none;
    }
}
//从右放大出现(贝塞尔)
@keyframes VusRightZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    }
    100% {
        transform: none;
    }
}

//Flip
//翻转
@keyframes VusFlip {
    0% {
        transform: perspective(600px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(600px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(600px);
        animation-timing-function: ease-in;
    }
}

//Shake
//左右抖动
@keyframes VusShake {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0);
    }
}

//Bounce
//上下反弹跳动
@keyframes VusBounce {
    0%, 20%, 53%, 80%, 100% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transition-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transition-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}
//左边滑动(出现)
@keyframes VusLeftBounceIn {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }
    75% {
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        transform: translate3d(5px, 0, 0);
    }
    100% {
        transform: none;
    }
}

//左边滑动(隐藏)
@keyframes VusBounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}
//右边滑动(出现)
@keyframes VusRightBounceIn {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        transform: none;
    }
}
//右边滑动(隐藏)
@keyframes VusRightBounceOut {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

//拉橡皮
@keyframes VusRubberBand {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, .75, 1);
    }
    40% {
        transform: scale3d(.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, .85, 1);
    }
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, .95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}