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>