小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 {&nbsp; &nbsp; width: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; height: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; border-radius: 300px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; margin: 180px auto 0;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; transition: 1s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; animation: 1s drop infinite;&nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@keyframes drop {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; transform: scale(1);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; transform: scale(1.4);&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}<div&nbsp;id="drop"></div>JS什么的都不需要了