How to smooth out a CSS gradient transition?

为君一笑 提交于 2019-12-06 15:49:30

Animating background-* properties can be resource intensive - you can try animating transform for relatively better performance - see demo below using traslate for the animation:

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>

Since your animation lasts 15 seconds, trying to run it at full 60fps would mean calculating 15*60 = 900 frames.

Since the difference between a frame and the next is quite small, you can make the CPU work quite less asking for a stepped animation, for instance with steps(75)

It could be also good to set slight delays between animations, so that they don't execute at the same time

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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!