为什么关键帧不平滑？

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; 默认 animation-timing-function 是 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>

为什么关键帧不平滑？

Why Isn't keyframes smooth?

html

css

keyframe

css-animations