[애니메이션] 반짝이는 점

html

<div class="line">
  <span></span>
  <ul>
    <li class="a"></li>
    <li class="b"></li>
    <li class="c"></li>
  </ul>
</div>

css

.line {
  width: 35%;
  position: relative;
}
.line span {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.line li {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -2px;
}
.line li.a {
  left: 0;
}
.line li.b {
  left: 50%;
  transform: translateX(-50%);
}
.line li.c {
  right: 0;
}
.line li::before {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -3px;
  margin-left: -3px;
  animation: dot 1.5s infinite;
}
@keyframes dot {
  100% {
    opacity: 1;
    transform: scale(3.5);
    opacity: 0;
  }
}

원리
span으로 긴 가로선을 만들고 li로 점을 만들어 배치한다.
가상요소 before를 이용하여 동일한 점을 absolute 속성으로 만든다.
애니메이션시에 확대되는 효과의 기준점을 중심으로 맞추기 위해 top,left에 네거티브 마진으로 크기의 절반값을 준다.