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

最新推荐文章于 2022-11-08 15:06:00 发布

Dream_travelerly

最新推荐文章于 2022-11-08 15:06:00 发布

阅读量135

点赞数

文章标签： css 动画 css3 前端

本文链接：https://blog.csdn.net/Dream_travelerly/article/details/127438320

版权

简单特效
    @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内核*/
　　　　}