文字上的渐变导致关键帧动画无法正确呈现

Question

我正在尝试为一些带有渐变的文本设置动画。我正在使用一个简单的CSS关键帧将其引入并更改不透明度。

但是，动画完成后，带有渐变的文本无法完全呈现。有时不透明性无法完全发挥作用。

我添加了h1和h2标签。 h1标签是有问题的文字，h2是展示它的外观，而不会引起渐变

这里是笔形链接：https://codepen.io/anon/pen/jRMKBQ

代码也在下面

@keyframes text {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.text {
  transform: translateY(100px);
  opacity: 0;
  animation: text 1s ease forwards;
}

h1 {
  text-align: center;
  font-size: 4rem;
  color: black;
  padding: 20px 0px;
  font-weight: bold;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-image: linear-gradient(90deg, #e64c4c 0%, #ef32fb 100%);
}

h2 {
  text-align: center;
  font-size: 4rem;
  color: black;
  padding: 20px 0px;
  font-weight: bold;
}

<h1 class="text">Explore some of our recent work</h1>

<h2 class="text">Explore some of our recent work</h2>