如何平滑 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);
  
&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>

【讨论】:

以上是关于如何平滑 CSS 渐变过渡?的主要内容,如果未能解决你的问题,请参考以下文章

平滑的 CSS 渐变

如何使用 CSS 过渡让 Div 平滑向上移动? [复制]

CSS:如何在另一个动画运行时保持悬停过渡平滑

Vue/CSS,如何在两个交替元素之间进行平滑的高度过渡(包括小提琴)

CSS3之渐变

iphone 4 android 4.1 上的平滑 CSS3 过渡