如何平滑 CSS 渐变过渡？
Posted
技术标签:
【中文标题】如何平滑 CSS 渐变过渡？【英文标题】：How to smooth out a CSS gradient transition? 【发布时间】：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>【问题讨论】：
【参考方案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);
<div></div>【讨论】：
【参考方案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>【讨论】：
以上是关于如何平滑 CSS 渐变过渡？的主要内容，如果未能解决你的问题，请参考以下文章