css 动画集合（亲测可用，完善中...）

.uni-animation-from-top-to-bottom {
	/* 从上至下动画效果 */
	-webkit-animation: fadeInDown .3s;
	animation: fadeInDown .3s;
}

@keyframes fadeInDown {
	0% {
		-webkit-transform: translate3d(0, -20%, 0);
		-webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}

@-webkit-keyframes fadeInDown {
	0% {
		-webkit-transform: translate3d(0, -20%, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: none;
		opacity: 1;
	}
}

.uni-from-the-bottom {
	/* 从下至上动画效果 */
    -webkit-animation: fadelogIn .4s;
    animation: fadelogIn .4s;
}
 
@keyframes fadelogIn {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
 
@-webkit-keyframes fadelogIn {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: none;
    }
}

.unify-dextrosinistral {
	/* 从右向左动画效果 */
    -webkit-animation: fadeleftIn .4s;
    animation: fadeleftIn .4s;
}
 
@keyframes fadeleftIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
 
@-webkit-keyframes fadeleftIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
    }
    100% {
        -webkit-transform: none;
    }
}