How to smooth out a CSS gradient transition?

て烟熏妆下的殇ゞ 提交于 2019-12-08 06:45:14

问题


I am creating an interactive touchscreen display using a program called Intuiface and have created some background tiles/squares that I want to make look 'alive' by transitioning slowly between colours.

I have used a linear-gradient transition in CSS to do it but the problem is that the transition looks choppy. The program is running 12 visible tiles (it is a very large touchscreen).

I have tried using fewer colours and running on more powerful GPUs (I think it is CPU run anyway) but this hasn't helped.

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%
    }
}

At the moment the animations are noticeably choppy. I would like the transition to be much smoother. Does anyone know how I can achieve this?

Here is the code snippet.

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:


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>



回答2:


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>


来源:https://stackoverflow.com/questions/55760206/how-to-smooth-out-a-css-gradient-transition

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