为什么关键帧不平滑？

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>