小demo：请教怎么做出类似于水滴不断扩张的效果？

Question

<style>    #drop{        width:300px;        height:300px;        border-radius:300px;        border:1px solid #000;        margin:180px auto 0;    }</style>    <div id="drop"></div>        drop.timer = setInterval(function(){        drop.style.cssText = `transition:1s;                                transform:scale(1.4);                                opacity:0;                                transform-origin: 150px 150px;                            `;    },500);    现在我能做到的只是完成一次。但是我想要一直往复循环这个过程，从小到大，从清晰到模糊，然后下一次再重复这个步骤，一直不停的循环。有没有好的实现思路，请教大家！谢谢！

Answer 1

用CSS animation

#drop {

    width: 300px;                

    height: 300px;               

    border-radius: 300px;        

    border: 1px solid #000;      

    margin: 180px auto 0;        

    transition: 1s;              

    animation: 1s drop infinite; 

}                                

                                 

@keyframes drop {                

    0% {                         

        transform: scale(1);     

        opacity: 1;              

    }                            

    100% {                       

        transform: scale(1.4);   

        opacity: 0;              

    }                            

}

<div id="drop"></div>

JS什么的都不需要了