CSS动画点不显示

Question

我正在为一个小组开发一个网站，我正试图在“正在加载...”这个词中设置一些点，以便它们闪烁。我有动画工作，但由于某种原因，除非我用光标突出显示文本，否则点不会显示。

@keyframes blink {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}

.text span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.text span:nth-child(2) {
  animation-delay: .2s;
}

.text span:nth-child(3) {
  animation-delay: .4s;
}

.text {
  width: 300px;
  height: 70px;
  font-size: 30px;
  background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  text-align: center;
  color: white;
}

<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>

然而，文本的“正在加载”部分显示正常。有任何想法吗？

谢谢

Answer 1

您需要一种颜色才能获得透明度。

现在看来，它已经是透明的，所以不透明度什么都不做。如果你有一个颜色（不仅仅是透明的），它会显示相关的百分比，与渐变混合。我在下面的例子中使用黑色作为“背景”。

@keyframes blink {
  /* changes the values here */
  0% {
    -webkit-text-fill-color: rgba(0, 0, 0, 0.2);
  }
  20% {
    -webkit-text-fill-color: rgba(0, 0, 0, 1);
  }
  100% {
    -webkit-text-fill-color: rgba(0, 0, 0, 0.2);
  }
}

.text span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.text span:nth-child(2) {
  animation-delay: .2s;
}

.text span:nth-child(3) {
  animation-delay: .4s;
}

.text {
  width: 300px;
  height: 70px;
  font-size: 30px;
  background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  text-align: center;
  color: white;
}

<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>