在UILabel中对选定数量的字符进行动画处理

Question

是否可以在UILabel中实现这种效果？

https://codepen.io/TravisL12/pen/MaWmbo

    <h1>Loading
      <span class='dot' id="dot-1">.</span>
      <span class='dot' id="dot-2">.</span>
      <span class='dot' id="dot-3">.</span>
    </h1>
$delay: 1.5s;

body {
  background: lightblue;
}

.dot {
  opacity: 0;
  -webkit-animation: dot $delay alternate infinite;
  animation: dot $delay alternate infinite;
}

#dot-1 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#dot-2 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

#dot-3 {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

@-webkit-keyframes dot {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

我考虑过对整个字符串进行动画处理，好像每个状态是一个不同的字符串一样，但是我相信我最终会淡入/淡出整个字符串，而不仅仅是句点。 甚至只用一个UILabel还是有可能的，我每个时期都需要一个UILabel吗？

编辑：此问题并非重复。我的动画更加复杂。