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

r囧r小猫 2022-09-14 14:19 138阅读 0赞

.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;
        }
    }