CSS3：动画animation

最新推荐文章于 2024-07-22 19:12:50 发布

独憩

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量279

点赞数

分类专栏：前端文章标签： css3 css 动画

本文链接：https://blog.csdn.net/qq_54517101/article/details/126330542

版权

前端专栏收录该内容

53 篇文章 5 订阅

订阅专栏

基本使用方法：

先在style定义动画的名字及序列

        @keyframes move {
            0%{
                transform: translate(0 0);
            }

            25%{
                transform: translate(1000px,0);
            }

            50%{
                transform: translate(1000px,200px);
            }
            75%{
                transform: translate(0,200px);
            }

            100%{
                transform: translate(0,0);
            }
            
        }

再在css中调用，一般来说最少需要两个语句：

一个是对应的动画名字，一个是持续时间：

        div{
            height: 100px;
            width: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 3s;
        }

常见属性：

简写：

案例，波纹效果：

    <style>

       


        .city{
            position: relative;
            width: 200px;
            height: 200px;

            margin: 100px auto;
        }
        .dotted{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: blue;
        }
        .city div[class^="pulse"]{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 20px;
            height: 20px;
            box-shadow: 0 0 12px blue;
            border-radius: 50%;
            animation: move 1.2s linear infinite;
        }

        @keyframes move {
            0%{}
            70%{
                width: 60px;
                height: 60px;

                opacity: 1;
            }
            100%{
                width: 90px;
                height: 90px;
                opacity: 0;

            }
        }

        .city .pulse2 {
            animation-delay: 0.4s!important;
        }

        .city .pulse3{
            animation-delay: 0.8s!important;
        }




    </style>
</head>
<body>
    <div class="city">
        <div class="dotted"></div>
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>

    </div>

    
</body>