小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什么的都不需要了