Анимация значков Loaction с использованием чистого CSS

Я планировал сделать, как капля воды, движущаяся вокруг значка локации. Попробовал немного, но я не мог позволить воде идеально вращаться вокруг значка локации, так как я не очень увлекаюсь анимацией.

Вот мой код,

 <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)}
    }

Как сделать так, чтобы капля вращалась внутри значка локации (но должна двигаться по краям)