如何平滑CSS渐变过渡？ [英] How to smooth out a CSS gradient transition?
问题描述
我正在使用名为 Intuiface 的程序创建交互式触摸屏显示器，并创建了一些背景图块/方块，我希望通过在颜色之间缓慢过渡来使它们看起来活着。
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.
我在CSS中使用了线性渐变过渡，但是问题是过渡看起来很不稳定。该程序运行12个可见的图块（这是一个非常大的触摸屏）。
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).
我尝试使用较少的颜色并在功能更强大的GPU上运行（我认为这是CPU运行的无论如何）但这没有帮助。
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?
这是代码段。
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>
推荐答案
对 background-* 属性进行动画处理可能会占用大量资源-您可以为相对动画化 transform 动画更好的性能-请参见下面的演示，使用 traslate 作为动画：
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>
这篇关于如何平滑CSS渐变过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
