CSS 背景渐变过渡不起作用

Question

我正在尝试使用 @keyframes 为渐变背景制作动画，但由于某种原因，动画没有发生。我有所有供应商前缀，我拼写正确的动画名称。我为此使用了一个生成器：https://www.gradient-animator.com/，它在那里工作。

参见下面的示例：

@-webkit-keyframes warpedBackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes warpedBackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 100% 100%;
  
  -webkit-animation: warpedBackground 1s ease infinite;
  -moz-animation: warpedBackground 1s ease infinite;
  animation: warpedBackground 1s ease infinite;
}

<div id="gradientsquare"></div>

代码几乎相同，所以我不确定为什么我的代码不起作用...

Answer 1

通过指定 backgrouns-size:100% 100%，您可以使渐变的大小与 div 相同；因此 background-position 的所有值都是等效的，因此您不会看到任何移动。改变background-size，渐变会移动。

使其大于 div

@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  border:1px solid;
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 500% 100%;

  animation: warpedBackground 1s ease infinite;
}

<div id="gradientsquare"></div>

使其小于 div:

@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  border:1px solid;
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 50% 100%;
  background-repeat:no-repeat;
  
  animation: warpedBackground 1s ease infinite;
}

<div id="gradientsquare"></div>

CSS 背景渐变过渡不起作用

CSS background gradient transition not working

css

background-image

linear-gradients

css-animations