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

您需要一种颜色来支持透明度。

就目前而言，它已经是透明的，所以 opacity 没有任何作用。如果你有一种颜色（不仅仅是透明的），它会显示相关的百分比，与渐变混合。我在下面的示例中使用黑色作为“背景”来做到这一点。

@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>