css动画简单特效以及调用方法

简单特效
    @keyframes show {
        0% {
            transform: translateY(-50px);
        }

        60% {
            transform: translateY(40upx);
        }

        100% {
            transform: translateY(0px);
        }
    }

    @-webkit-keyframes show {
        0% {
            transform: translateY(-50px);
        }

        60% {
            transform: translateY(40upx);
        }

        100% {
            transform: translateY(0px);
        }
    }

    @keyframes showX {
        0% {
            transform: translateX(-50px);
        }

        60% {
            transform: translateX(40upx);
        }

        100% {
            transform: translateX(0px);
        }
    }

    @keyframes cuIcon-spin {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }

        100% {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }

    @keyframes bounce-down {
        25% {
            transform: translateX(-3px);
        }

        50% {
            transform: translateX(0);
        }

        75% {
            transform: translateX(3px);
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes fade-in {
        0% {
            opacity: 0;
        }

        /*初始状态 透明度为0*/
        40% {
            opacity: 0;
        }

        /*过渡状态 透明度为0*/
        100% {
            opacity: 1;
        }

        /*结束状态 透明度为1*/
    }

调用方法：

　　　　#wrapper {
　　　　　　　　animation: fade-in;
　　　　　　　　/*动画名称*/
　　　　　　　　animation-duration: 1.5s;
　　　　　　　　/*动画持续时间*/
　　　　　　　　-webkit-animation: fade-in 1.5s;
　　　　　　　　/*针对webkit内核*/
　　　　}

标签：动画,translateX,translateY,特效,100%,transform,keyframes,0%,css
来源： https://www.cnblogs.com/ly1368489670/p/14338199.html