如何平滑 CSS 渐变过渡？答案

【问题标题】：How to smooth out a CSS gradient transition?如何平滑 CSS 渐变过渡？
【发布时间】：2019-09-09 15:04:18
【问题描述】：

我正在使用一个名为 Intuiface 的程序创建一个交互式触摸屏显示器，并创建了一些背景图块/正方形，我想通过在颜色之间缓慢过渡来使其看起来“生动”。

我在 CSS 中使用了线性渐变过渡，但问题是过渡看起来不连贯。该程序正在运行 12 个可见图块（这是一个非常大的触摸屏）。

我尝试使用更少的颜色并在更强大的 GPU 上运行（我认为它无论如何都是 CPU 运行的），但这并没有帮助。

body {
    width: 100wh;
    height: 90vh;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

目前动画明显不连贯。我希望过渡更加顺利。有谁知道我如何做到这一点？

这里是代码sn-p。

body {
  width: 100wh;
  height: 90vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

<html>

<body>
</body>

</html>

【问题讨论】：

标签： html css css-animations css-gradients

【解决方案1】：

动画background-* 属性可能会占用大量资源 - 您可以尝试动画 transform 以获得相对更好的性能 - 请参阅下面的演示，使用 traslate 制作动画： p>

body {
  margin: 0;
}

div {
  height: 100vh;
  overflow: hidden;
}

div:after {
  content: '';
  display: block;
  width: 400vw;
  height: 400vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  50% {
    transform: translate(-300vw, -300vh);
  }
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

由于您的动画持续 15 秒，因此尝试以全速 60fps 运行它意味着计算 15*60 = 900 帧。

由于一帧和下一帧之间的差异非常小，您可以减少 CPU 的工作量来要求步进动画，例如 steps(75)

在动画之间设置轻微的延迟也是不错的，这样它们就不会同时执行

body {
  width: 100wh;
  height: 90vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 15s infinite steps(75);
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

<html>

<body>
</body>

</html>

【讨论】：