<div class="container">
  <div class="item">
    <svg width="16" height="32" version="1.1" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
      <path d="m8 0c-4.453 0-8 3.8441-8 8.5v3c0 4.6559 3.547 8.5 8 8.5 4.453 0 8-3.8441 8-8.5v-3c0-4.6559-3.547-8.5-8-8.5zm0 2c3.303 0 6 2.8459 6 6.5v3c0 3.6541-2.697 6.5-6 6.5-3.303 0-6-2.8459-6-6.5v-3c0-3.6541 2.697-6.5 6-6.5z" />
      <path class="arrow arrow-first" d="m1.0137 21a1 1 0 0 0-0.88281 0.50391 1 1 0 0 0 0.37305 1.3652l7 4a1.0001 1.0001 0 0 0 0.99219 0l7-4a1 1 0 0 0 0.37305-1.3652 1 1 0 0 0-1.3652-0.37305l-6.5039 3.7168-6.5039-3.7168a1 1 0 0 0-0.48242-0.13086z" />
      <path class="arrow arrow-second" d="m1.0137 26a1 1 0 0 0-0.88281 0.50391 1 1 0 0 0 0.37305 1.3652l7 4a1.0001 1.0001 0 0 0 0.99219 0l7-4a1 1 0 0 0 0.37305-1.3652 1 1 0 0 0-1.3652-0.37305l-6.5039 3.7168-6.5039-3.7168a1 1 0 0 0-0.48242-0.13086z" />
    </svg>
  </div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100wv;
  height: 100vh;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 160px;
  background-color: #f0f0f0;
}

.arrow {
  animation: 1s linear 0s infinite blink;
}

.arrow-second {
  animation-delay: 0.25s;
}

@keyframes blink {
  0 {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}