使用纯CSS的Loaction图标动画

Question

我打算像在位置图标周围滴一滴水一样。尝试了一下，但由于我对动画内容的兴趣不大，我不能让水绕位置图标完美地旋转。

这是我的代码，

 <div id ="location">
    <div id = "droplet"></div>
 </div>

    #location {
      background: black;
      height: 200px;
      width: 200px;
      border-radius: 50% 50% 50% 0;
      transform:rotate(-45deg);  
    }

    #location::after{
        content '';
        width 14px;
        height 14px;
        margin: 8px 0 0 8px;
        background: #89849b;
        position absolute;
        border-radius 50%;
    }

    #droplet {
     background: #2c3e50;
     height: 50px;
     width: 50px;
     border-radius:50%;
     border:  5px double darkgreen;
     margin: 23%; 
     -webkit-animation-name: rotate;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-duration:4s 
    }

    @-webkit-keyframes rotate{
      0%{-webkit-transform: rotate(-90deg) rotateY(0) scale(0)}
      30%{-webkit-transform: rotate(90eg) rotateY(0) scale(0.7)}
      80%{-webkit-transform: rotate(180deg) rotateY(0) scale(1)}
      100%{-webkit-transform: rotate(-360deg) rotateY(0) scale(0)}
    }

如何使液滴在位置图标内旋转（但液滴应绕其边缘移动）