HTML


    <svg width="60px" viewBox="0 0 14.334 24.75">
        <circle class="circle-1" fill="white" cx="7.167" cy="6" r="1.2"/>
        <circle class="circle-2" fill="white" cx="7.167" cy="6" r="1.2"/>
      <path stroke="white" fill="transparent" d="M7.167,0.5C3.485,0.5,0.5,3.485,0.5,7.167v10.416 c0,3.682,2.985,6.667,6.667,6.667s6.667-2.985,6.667-6.667V7.167C13.834,3.485,10.849,0.5,7.167,0.5z"/>
    </svg>

CSS


    .circle-1, .circle-2 {
        animation: scroll 2s infinite linear;
        opacity:0;
   }
    .circle-2{
        animation-delay: 1s;
   }
    @keyframes scroll {
        0% {
            cy: 4;
            opacity: 0;
       }
        45%, 55% {
            opacity: 1;
            cy: 9;
       }
        100% {
            cy: 14;
            opacity: 0;
       }
   }