<div class="svg">
  <div class="circle"></div>
  <div class="circle"></div>
</div>

.svg {
  position: relative;
  background: white;
  width: 400px;
  height: 200px;
  margin: auto;
  filter: blur(20px) contrast(30);
}

.circle {
  background: black;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 100%;
  &:first-child {
    animation: circle-left ease-in-out 0.8s infinite alternate;
  }
  &:last-child {
    animation: circle-right ease-in-out 0.8s infinite alternate;
  }
}

@keyframes circle-left {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-57px);
  }
}

@keyframes circle-right{
  0% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(57px);
  }
}