为什么关键帧不流畅？

Question

因此，我试图使文本闪烁，但我希望关键帧之间能够平滑过渡。我该怎么办？

fire{
  background: -webkit-linear-gradient(yellow, orange,red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-name: fire;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes fire {
  0% {
    background: -webkit-linear-gradient(yellow, orange, red);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  20% {
    background: -webkit-linear-gradient(red, yellow, orange);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  40% {
    background: -webkit-linear-gradient(red, orange, orange);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  60% {
    background: -webkit-linear-gradient(orange, yellow, red);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  80% {
    background: -webkit-linear-gradient(yellow, orange, red);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  80% {
    background: -webkit-linear-gradient(red, orange, red);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
}

<fire>Flicker Flicker</fire>

您建议我做什么以使过渡平滑？

Answer 1

编辑：添加animation-timing-function: linear;的默认动画定时功能为ease，这将是更粗糙的动画。

fire{
  background: -webkit-linear-gradient(yellow, orange,red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-name: fire;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes fire {
  0% {
    background: -webkit-linear-gradient(yellow, orange, red);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  20% {
    background: -webkit-linear-gradient(red, yellow, orange);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  40% {
    background: -webkit-linear-gradient(red, orange, orange);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  60% {
    background: -webkit-linear-gradient(orange, yellow, red);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  80% {
    background: -webkit-linear-gradient(yellow, orange, red);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  100% {
    background: -webkit-linear-gradient(red, orange, red);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
}

<fire>Flicker Flicker</fire>