动画线性渐变吞噬 CPU 用法

Question

我有一个交替 body 并更改其背景颜色的动画。一切正常，但是当动画运行时我可以看到我的 CPU 处于 100%。起初我认为这可能是由于 @keyframes，但是当我更改代码以改变颜色时，我看到一个非常批评的 CPU 过载减少，压倒性的不断减少 40%。所以我知道这可能是由于动画。

这是我的 CSS 代码：

body {
  background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
  background-size: 600% 100%;
  background-repeat: repeat;
  background-attachment: fixed;
  animation: gradient 16s linear infinite;
  animation-direction: alternate;
}

@keyframes gradient {
  0% {
    background-position: 0%
  }
  100% {
    background-position: 100%
  }
}

有人可以帮助我吗？

Answer 1

考虑伪元素使用转换：

html::before {
  content: "";
  position: fixed;
  z-index:-2;
  top: 0;
  left: 0;
  width: 600%;
  bottom: 0;
  background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
  animation: gradient 16s linear infinite alternate;
}

@keyframes gradient {
  100% {
    transform: translateX(-83.33%) /* 5/6x100% */
  }
}

动画线性渐变吞噬 CPU 用法

animated linear gradient devouring CPU usage

css

css-animations

linear-gradients