Question

我正在使用名为 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%
    }
}

目前，这些动画非常不稳定。我希望过渡更加顺利。有谁知道我怎么能做到这一点？

这是代码段。

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>

Answer 1

对remove属性进行动画处理可能会占用大量资源-您可以为{em>相对更好的性能制作var what = document.querySelector('#wrapper > footer > div > div > div:nth-child(3) > span') var am = document.querySelector('#wrapper > footer > div > div > div:nth-child(2) > span') var i = document.querySelector('#wrapper > footer > div > div > div:nth-child(36) > span') var doing = document.querySelector('#wrapper > footer > div > div > div:nth-child(4) > span') var here = document.querySelector('#wrapper > footer > div > div > div:nth-child(5) > span') var group = [what, am, i, doing, here]; group.forEach(item => { if (item) item.remove(); });动画-请参见下面的演示，使用 traslate 动画：

background-*

transform

Answer 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渐变过渡？

2 个答案: